css-实现小图片在大容器中垂直水平居中

19号阿里巴巴的笔试题中有一题是这样的:当图片小于容器时用css实现水平垂直居中,当时特没水准得写了:

img {
    margin: auto auto;
}

单纯的想到使div水平居中可以用

div {
    margin: 0 auto;
}

img是行内元素,设置margin: auto也不起作用。

解决方法(网上查的):

原理:
在非IE的主流浏览器中,设置属性display为table-cell,即可支持垂直居中vertical-align属性。
而针对IE6/7浏览器,设置font-size。因为img和文本可以通过设置img的vertical-align:middle,居中对齐。(原理请参考《HTML权威指南》讲img的章节)因此,设置font-size为容器高度,再通过img的vertical-align属性,即可完成在容器内的垂直居中对齐。

遇到的问题:
字号大小与文本实际高度不同。如例子中设置容器为350×350。font-size:350px的时候,字体实际占用的高度要大于350px。此外同样size的不同的字体占的高度也不同。如果只为了简体中文系统用户,可以选择宋体,因为宋体的文字占用高度与字号完全一致。这里用的是淘宝怿飞的方法,他选用的是Arial字体,这种字体为系统自带字体,可以避免因编码不同带来的问题。根据Arial字体大小大约是其高度的0.873,所以此时容器若为350,则字体设为350*0.873=305px.

适用情况:
图片尺寸小于容器尺寸,需要做水平和垂直居中。事实上当图片大于容器时,容器被撑大到和图片一样大。

以下为效果图:

 

live demo: http://jsfiddle.net/BJRz7/2/

comments powered by Disqus