CODEWITHSUNDEEP
csspositioncentering
Cyclone
Cyclone

Reputation: 15279

I can not center the div content

This is my fiddle: http://jsfiddle.net/7UwD2/

I've tried everything I found on the internet - setting:

margin: 0px auto; with width, but it doesn't work.

Only if I'll add an attribute: text-align: center; to the head-title class it does center - but only the text, image is still on the left position.

Where is my problem?

Upvotes: 0

Views: 127

Answers (1)

Šime Vidas
Šime Vidas

Reputation: 186003

  • Remove the float from the image,
  • use text-align: center on the outer DIV,
  • use a SPAN instead of the inner DIV,
  • apply vertical-align: middle to the image and SPAN

HTML:

<div class="head-title">
    <img class="list-icon" src="...">
    <span>Menu</span>
</div>

CSS:

.head-title {
    width: 150px;
    height: 26px;
    padding: 5px;        
    text-align: center;
}

.head-title > * {
    vertical-align: middle;
}

.list-icon {
    width: 24px;
    height: 24px;
}

Live demo: http://jsfiddle.net/7UwD2/6/

Upvotes: 2

Related Questions