我无法将 div 内容居中

【问题标题】：I can not center the div content我无法将 div 内容居中
【发布时间】：2012-03-03 21:58:54
【问题描述】：

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

我已经尝试了我在互联网上找到的所有设置：

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

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

我的问题在哪里？

【问题讨论】：

标签： css position centering

【解决方案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/

【讨论】：

不错的技能伙伴！奇迹般有效。 :) 谢谢。