css - Table Layout - Bootstrap Progress Bar -


i trying following effect:

enter image description here

essentially have done make div with

display: table; 

and populated divs containing font awesome icons with

display: table-cell; 

js fiddle: http://jsfiddle.net/abehnaz/wchbc/1/

my problem right can't figure out how line go center of 1 table-cell center of other table cell. can point me in right direction?

edit:

here how got looking for: http://jsfiddle.net/abehnaz/wchbc/8/. pretty wordy solution, job. thing left me try figure out how gap in between top line , bottom line. thoughts?

check solution: http://jsfiddle.net/wchbc/5/

basically created new div line , restored structure simple div layout:

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

if don't want symbols transparent background, add background color:

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

Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -