CSS 图片+文字，文字垂直居中问题

在网页布局中，垂直居中是很常用的需求。

例如文字的居中：



HTML代码：

<div class="demo">
手机
</div>

CSS代码：

.demo{
border: 1px solid #000;
height: 64px;
line-height: 64px;
}

我们可以看到文字居中是很简单的，line-height是比较轻松的解决方案，当然也可以用padding，但不推荐vertical-align，这属性比较怪异。

当加入图片时，却变成了这样：



HTML:

<div class="demo">
<img src="phone.png" alt="" />
手机
</div>

CSS中不管用vertical-align，还是line-height都无法让文字垂直居中。

我的解决方法：

改变文字的定位属性，position设为relative，并设置top值。

具体如下：

HTML:

<div class="demo">
<img src="phone.png" alt="" />
<span class="demo-font">手机</span>
</div>

CSS:

.demo .demo-font{
position: relative;
top: -23px;
}

效果：



兼容性应该没有问题，测试环境：IE6-9、Chromium24、Firefox19