未知高度图片的垂直居中

问题:假设外部div高度宽度已知,为200px,div内部图片大小未知,如何实现图片的水平和垂直居中?

水平居中很简单,text-align:center即可解决,垂直居中就有些麻烦了,主要是由于ie6,7的存在。

大家知道,在表格布局中,有个属性vertical-align:middle,那我们尝试用这个属性吧

.box{ width:200px; height:200px; border:1px solid #000; text-align:center; vertical-align:middle, }

 

神马!木有用……

让我们仔细看下对这个属性的定义:

vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

明白了吧,关键词:行内元素 单元格

第一种用法:行内元素

假设有两个行内元素a和b,a和b都是img,当a加了一个vertical-align:middle样式之后,b的底部(基线)就会对齐a的中间位置,如下图:

如果a和b都加了一个vertical-align:middle样式,那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了,如下图:

怎样利用这个特性呢?如下图

于是代码可以这样写:


.box{ width:200px; height:200px; text-align:center; border:1px solid #000; } span{ display:inline-block; height:100%; vertical-align:middle; } .box img{ vertical-align:middle; }

 

YES!ie6,7下同样有效!

 

第二种用法:单元格

把外部div设置成 display:table-cell; 然后利用单元格的垂直居中

代码如下:


.box { display: table-cell; vertical-align:middle; text-align:center; width:200px; height:200px; border: 1px solid #eee; }

bingo!Chrome下木有问题,但素ie6,7悲剧鸟~他们不支持该属性…..肿么办,只有针对他们单独hack了

下面是从怿飞的blog上发现的方法:


.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/

width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}

关于这个font-size,确实很神奇,不过这种方法实现的垂直居中并不是那么精确,但避免了额外的无用标签,不失为一个好方法

 

 

 

 

参考文献:

http://www.cnblogs.com/xueming/archive/2012/03/21/VerticalAlign.html

http://www.planabc.net/2008/05/26/img_vertical_center_solution/