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

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -