CODEWITHSUNDEEP
htmlcssalignment
Arif YILMAZ
Arif YILMAZ

Reputation: 5866

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

Upvotes: 0

Views: 107

Answers (2)

JMWhittaker
JMWhittaker

Reputation: 3653

Ok you could use the classic media object layout method here. This CSS would be reusable too.

Take a look at this example - http://jsfiddle.net/tL4eW/

Alter your HTML to be like this. The two images before your centered text element.

<div class="header">
  <img class="obj-left" src="img1.png" width="50" height="50"/>
  <img class="obj-right" src="img2.png" width="50" height="50"/>
  <div class="obj-middle"><p class="txt-center">This text should be all centered</p></div>
</div>

The CSS is very straight forward:

.obj-left {
    float:left;
}

.obj-right {
    float:right;
}

.obj-media {
    overflow:hidden;
}

.txt-center {
    text-align: center;
}

Does this answer your question?

Upvotes: 0

user1976613
user1976613

Reputation:

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/

Upvotes: 1

Related Questions