Search code examples
htmlcssalignment

make "top 3-column bar" with divs and css


I am trying to make a top bar with 2 images and a text between those images. But I couldnt center the text in middle. I am doing it for mobile devices.

here is my html

<img src="1.jpg" />
Company Name
<img src="2.jpg" />

I tried the code below but didnt work. I couldnt center the text

<div style="float:left"><img src="1.jpg" /></div>
<div>Company Name</div>
<div style="float:right"><img src="2.jpg" /></div>        
<div style="clear:both"/></div>

images are displayed correctly but how do you center the text between the images? I cannot use

thanks


Solution

  • Try floating all the divs left and make the width of them 33.3% and than position the content of them with text-alind because as i see all the content in the divs is inline content

    <div style="float:left; width: 33.3%;"><img src="1.jpg" /></div>
    <div style="text-align:center; float:left; width: 33.3%;">Company Name</div>
    <div style="text-align: right; float:left; width: 33.3%;"><img src="2.jpg" /></div>        
    <div style="clear:both/></div>
    

    here is the example: http://jsfiddle.net/Lj4wK/