图标和文字居中

图标和文字居中

 

一般按照标准如下写法

<div class="box">
    <p><i class="icon4"></i><span class="text">无论怎么看，我都是水平线居中的。</span></p>
</div>

==============

.box p {
width: 80%;
height: 40px;
line-height: 40px;
border: 1px #000 dashed;
margin: 13px auto 0;
}

.box .icon4 {
width: 40px;
height: 40px;
display: inline-block;
background: url(../images/lingdang.png) no-repeat 0 0;
background-size: 100% 100%;
vertical-align: middle;
margin-right: 3px;
}

=========================

背景图片使用标签的背景实现，且居中（vertical-align: middle;）文本内容使用标签包裹。父元素设置行高。

效果地址：http://files.cnblogs.com/files/leshao/%E5%9B%BE%E6%A0%87%E5%92%8C%E6%96%87%E5%AD%97%E5%B1%85%E4%B8%AD.rar