css - 我无法将 div 内容居中

Question

这是我的 fiddle :http://jsfiddle.net/7UwD2/

我已经尝试了我在互联网上找到的所有内容 - 设置:

margin: 0px auto; 使用 width，但它不起作用。

只有当我添加一个属性:text-align: center; 到 head-title 类时它才会居中 - 但只有文本，图像仍然在左边的位置。

我的问题在哪里？

Answer 1

• 从图像中移除float，
• 在外部 DIV 上使用 text-align: center，
• 使用 SPAN 而不是内部 DIV，
• 应用 vertical-align: middle 到图像和 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;
}

现场演示: http://jsfiddle.net/7UwD2/6/