我不能把div内容集中在一起

Question

这是我的小提琴：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/