图片与文字水平对齐

1、使用vertical-align属性

css:

.div1 *
{
    vertical-align:middle;
}
.div1 img
{
    width:16px;
    height:16px;
}

html:

<div class="div1">
    <img src="phone.png"/>
    <a href="javascript:;">这是需要对齐的文本</a>
</div>

通过设置子元素的vertical-align:middle让图片与文字对齐。

2、使用css的:before选择器

css:

.div2 a
{
    position:relative;
    padding-left:17px;
}
.div2 a:before
{
    content:" ";
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:16px;
    height:16px;
    background:url(phone.png) center center no-repeat;
    background-size:16px;
}

html:

<div class="div2">
    <a href="javascript:;">这是需要对齐的文本</a>
</div>

通过设置:before样式，将图片做为背景插入到文本前方。

下载Demo