Table Layout - Bootstrap Progress Bar

Question

Я пытаюсь получить следующий эффект:

По сути то, что я сделал это сделать DIV с

display: table; 

, а затем заселили ее с дивы содержащие значки шрифта Awesome с

display: table-cell; 

JS Fiddle: http://jsfiddle.net/abehnaz/wCHbc/1/

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

EDIT:

Вот как я получил то, что искал: http://jsfiddle.net/abehnaz/wCHbc/8/. Это довольно многословное решение, но оно выполняет эту работу. Единственное, что осталось от меня, это попытаться выяснить, как я мог бы получить промежуток между верхней линией и нижней линией. Есть предположения?

Answer 1

Проверить это решение: http://jsfiddle.net/wCHbc/5/

В основном я создал новый DIV, который является линией и восстановлена ​​структура как простой сОн макет:

.line{ 
    width:100%; 
    position:relative; 
    top:25px; 
    left:0px; 
    height:10px; 
    background:#00f; 
    z-index:-1; 
} 

Если вы не хотите, чтобы символы со прозрачный фон, просто добавить цвет фона:

.icon-star, .icon-rss{ 
    background:#fff; 
} 

Answer 2

Вы можете сделать это с position: absolute

DEMO jsFiddle

.line { 
    position: fixed; 
    width:200px; 
    height:7px; 
    top:95px; 
    left: 0; 
    right:60px; 
    margin: 0 auto; 
    background: blue; 
    z-index:-1; 
} 

EDITED

Я хотел бы использовать индикатор для этого

DEMO jsFiddle