图片垂直居中对齐的3种方法

详情请参考之前写过的一篇文章:CSS多行文字垂直居中的两种方法

HTML代码:

<div class="middle-box">
<img src="web.png"/>
<i class="visible"></i>
</div>

CSS代码:

.middle-box{height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-align: center; }
.middle-box img{vertical-align: middle; }
.visible{height: 100%; vertical-align: middle; width: 0; display: inline-block;}

目前我觉得这种方法是最简洁的。

演示

当然你也可以看一下上面这篇文章的另外一种方法。

网上还有许多:大小不固定的图片、多行文字的水平垂直居中

1.使用display:table-cell加文字

HTML部分(仅示例一张图片,其他重复,故略):

<ul class="zxx_align_box_4 fix"> <li> <div><img src="web1.png" /></div> </li> </ul>

css部分:

.zxx_align_box_4 li{float:left; margin-right:13px;}
.zxx_align_box_4 li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:118px; text-align:center; vertical-align:middle;} 
.zxx_align_box_4 li div img{vertical-align:middle;}

注意:高度:文字大小=1.14,这个比例我一直记着,但是后来我将这个比例的概念淡化了,原因在于多次遇到其他比例实现效果的情况。例如上面,就是1:1实现的。

2.display:inline-block加文字居中的,只适用于多图垂直居中对齐的情况。

HTML部分(仅示例两张图片,其他重复,故略):

<div class="zxx_align_box_5 fix"> 
<a href="#"> <img src="mm1.jpg" /> </a> 
<a href="#"> <img src="mm2.jpg" /> </a> 
</div>

css部分:

.zxx_align_box_5 a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;}
.zxx_align_box_5 a img{vertical-align:middle; padding:2px; border:1px solid #beceeb;}

不知道这个文字比例是怎么算的,感觉用我上面的第一种方法比较靠谱,虽然多了一个标签,但还是可以接受的。

原创文章:图片垂直居中对齐的3种方法 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/vertical-centering-with-css.html)

发表评论

请登录后发表评论: