jQuery - динамическая разметка экранных потоков

Question

Мне нужно создать динамический HTML-макет, который будет содержать телефонные фреймы с различной ориентацией, которые соединены горизонтальными или вертикальными линиями. Линии должны быть центрированы относительно кадров. Также каждый кадр будет содержать свою метку.

HTML-код:

<div class="flow-canvas">
            <div class="device-frame portrait" data-next="landscape">
                 <div class="screen-wrapper">
                    1
                    <div class="label">screen label</div>
                 </div>
            </div>
            <div class="device-frame landscape" data-next="portrait" data-prev="portrait">
                 <div class="screen-wrapper">
                    2
                    <div class="label">screen label</div>
                 </div>   
            </div>
            <div class="device-frame portrait" data-next="portrait" data-prev="landscape">
                <div class="screen-wrapper">
                    3
                    <div class="label">screen label</div>
                </div>
            </div>
            <div class="device-frame portrait" data-next="portrait" data-prev="portrait">
                <div class="screen-wrapper">
                     4   
                     <div class="label">screen label</div>
                </div>
            </div>
            <div class="device-frame portrait"  data-next="portrait" data-prev="portrait">
                <div class="screen-wrapper">
                    5
                    <div class="label">screen label</div>       
                </div>
            </div>
            <div class="device-frame portrait" data-next="portrait" data-prev="portrait">
                <div class="screen-wrapper">
                    6
                    <div class="label">screen label</div>   
                </div>
            </div>
            <div class="device-frame portrait" data-next="portrait" data-prev="portrait">
                 <div class="screen-wrapper">
                    7
                    <div class="label">screen label</div>
                 </div>   
            </div>
            <div class="device-frame portrait" data-next="portrait" data-prev="portrait"> 
                <div class="screen-wrapper">
                    8
                    <div class="label">screen label</div>
                </div>
            </div>
            <div class="device-frame portrait"  data-prev="portrait">
                <div class="screen-wrapper">
                    9

                </div>
            </div>
        </div>

JQuery

function drawFlow() {
    $('.flow-canvas').each(function () {
        var parentDiv = $(this);
        parentDiv.width("100%");
        var parentDivWidth = parseInt(parentDiv.width());
        $('.device-frame:last-child', parentDiv).addClass('last');
        $('.device-frame:first-child', parentDiv).addClass('first');
        var screens = $('.device-frame', parentDiv);
        var screenWidth = parseInt($('.device-frame', parentDiv).css('width')) + parseInt($('.device-frame', parentDiv).css('margin-left')) + parseInt($('.device-frame', parentDiv).css('margin-right'));
        var lisInRow = Math.floor(parentDivWidth / screenWidth);
        parentDiv.css('width', lisInRow * screenWidth);
        var rowIndex = 1;
        for (var i = 0; i < screens.length; i += lisInRow) {

            if (rowIndex % 2 == 0) {
                screens.slice(i, i + lisInRow).attr('data-row', 'even').attr('data-order', '');
            } else {
                screens.slice(i, i + lisInRow).attr('data-row', 'odd').attr('data-order', '');
            }
            $(screens[i]).attr('data-order', 'first-in-row');
            $(screens[i + lisInRow - 1]).attr('data-order', 'last-in-row');
            rowIndex++;
        }

    })
}

ДЕМО. Если вы измените размер окна результатов и обновите страницу, вы увидите уродливый макет. Есть несколько проблем, которые я не могу решить: 1. Как я могу центрировать вертикальные и горизонтальные линии, связанные с ориентацией кадра? 2. как я могу центрировать надписи, связанные со строками? 3. в хроме линии иногда перекрывают метку. Я думаю, что эта проблема вызвана из-за float: left стиль и :before а также :after поведение псевдоэлементов.

Если это глупое решение, пожалуйста, предложите мне другое.