responsive design - CSS: center element between floating elements -
responsive design - CSS: center element between floating elements -
pretty simple question, can't seem find solution. have 5 elements: 2 floating left, 2 floating right. 5th element supposed in perfect center of div (#infographic), no matter screen width is.
example:
1,2 -- 3 -- 4,5 or 1,2 ----- 3 ----- 4,5
html code:
<div id="infographic"> <div class="icon-one"></div> <p>me</p> <div class="arrows"></div> <p>customer</p> <div class="icon-two"></div> </div>
any suggestions element in center?
i guess output looking :
demo
class="snippet-code-css lang-css prettyprint-override">html, body,p{ margin:0; padding:0; } #infographic * { width:10%; height:30px; background:teal; padding:0; margin:0 1%; } #infographic .icon-one, #infographic .icon-one + p { float:left; } #infographic .icon-two, #infographic .icon-two + p { float:right; } #infographic .arrows{ margin:0 auto; text-align:center; }
class="snippet-code-html lang-html prettyprint-override"><div id="infographic"> <div class="icon-one"></div> <p>me</p> <div class="icon-two"></div> <p>customer</p> <div class="arrows">arrows</div> </div>
css responsive-design
Comments
Post a Comment