问题:假设外部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/