我不能居中DIV内容

Question

这是我的小提琴：http://jsfiddle.net/7UwD2/

我用尽了一切我在互联网上找到 - 设置：

margin: 0px auto;与width，但它不工作。

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

我的问题在哪里？

Answer 1

• 取出从图像中float，
• 在外DIV使用text-align: center，
• 而不是使用内部DIV一个SPAN，
• 申请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/