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样式,将图片做为背景插入到文本前方。