网页中图片和文字垂直居中分布

前端排版的时候，常常会碰到图片在一个区域在正中间，水平居中很容易做到，外层样式用{text-align:center}就可以水平居中;如果知道图片的高度，垂直居中可以在外层样式加padding样式，如果图片高度不知道的情况，又怎么做呢？

工具/原料

• 做网页的工具都行 ，比如：Dreamweaver,Aptana Studio,EditPlus等，记事本也可以。

方法/步骤

1. 在这里我用的是EditPlus，双击打开

   

2. 点击左上角，文件》新建》html网页

   

3. 在图片标签<img src="xxx" />之前加一个行内元素，比如加个<span></span>就行了。

   

4. 给外层div加上text-align:center;

   给span的样式display:inline-block;height:100%;vertical-align: middle;

   给图片加上vertical-align: middle;

   

5. 显示结果

   
6. 6

   文字居中 设置行高line-height等于外层的高度就行了。

   END

注意事项

• 图片的大小不能大于外层div的大小，所以最好给图片加上max-width,max-height样式。