Question

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?

Answer 1

• 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/