最近一直在写项目，今天总结一个常见的问题，就是在一个box里如何使图片按照我们的效果与文字对齐。

首先我们给图片和文字同时放到一个box里，



<ul>
<li><a><img src="img/xiaotu_1.jpg" alt=""/>科比</a></li>
</ul>



 

做如下样式：



ul{
width:300px;
height:100px;
margin: 100px auto ;
border: 1px solid #000;
}



 

可以想到效果如下：

html5文字对齐图片中间 html文字与图片居中对齐_html5文字对齐图片中间

假如我给ul 或者ul li加一个text-align：center;你能想到效果吗？效果都是一样的，因为该属性具有继承性，子集会继承该样式。

html5文字对齐图片中间 html文字与图片居中对齐_居中显示_02

但是这种效果，有几种办法可以实现，每种办法的原因是什么？

html5文字对齐图片中间 html文字与图片居中对齐_垂直居中_03

第一种：浮动法



Li{
float:left;
line-height:100px;/*为了使文字居中显示，如果图片不浮动，行高没有效果*/
}
img{
margin-top:10px;
margin-left:86px;
margin-right:20px;/*撑开文字向右*/
}



 

第二种：定位法



Li{
position:relative;
line-height:100px;/*为了使文字居中显示，如果图片不定位，行高没有效果*/
}
img{
position:absolute;
top:10px;
left:86px;
}
a{
display: block;
/*display: inline-block;都可以主要是为了给文字设置外边距*/
margin-left: 186px;
}



 

第三种：垂直居中对齐vertical-align:middle;



li{
text-align:center;/*使文本左右居中*/
line-height: 100px; /*使文本上下居中*/
}



效果如下：

html5文字对齐图片中间 html文字与图片居中对齐_html5文字对齐图片中间_04

接着对img进行设置



img{
vertical-align: middle;
}



 

写在一起代码为：



li{
text-align:center;/*使文本左右居中*/
line-height: 100px; /*使文本上下居中*/
}
img{
vertical-align: middle;
}



效果如下：

html5文字对齐图片中间 html文字与图片居中对齐_文档流_05

第四种：文本靠左对齐text-align:left;



li{
text-align: left;
line-height: 100px;
}
img{
margin-right:20px;
margin-left:86px;
vertical-align:middle;
}



 

看到这里，我想应该明白了，一共有两种思路，一种为了能通过line-height控制文本的高度，使img脱离文本流，一种是利用vertical-align为middle的对齐方式进行设置。总起来比较第一种和第二种都是脱离文本，但是定位需要给文字包一层标签需要做样式设置所以相比之下没有定位没有浮动的办法好。第三四种相比较，其实第四种就是第三种的衍生，用固定值的时候容易受到分辨率的影响，还是第三种办法最好，代码简洁，就能实现效果，第三种办法的缺点是当图片的宽度或者高度超过父级元素的时候就会行高就会失效，把文字挤出去。

图片默认是文本流，所以刚开始设置text-align:center;有效果，但是这时候文本的行高默认是图片的高度80px，当我对 li标签设置行高的时候，这时候后文字的高度就是设置后的行高，图片要相对文字对齐。对其进行浮动后图片脱离文档流，如果li没有设置行高，默认的是行内最高地高度，文字的高度。

html5文字对齐图片中间 html文字与图片居中对齐_文档流_06

html5文字对齐图片中间 html文字与图片居中对齐_文档流_07

图片的vertical-align的属性为下：

html5文字对齐图片中间 html文字与图片居中对齐_文档流_08