css - Table Layout - Bootstrap Progress Bar -
i trying following effect:
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
Post a Comment