0%

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

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

1
2
3
img {
margin: auto auto;
}

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

1
2
3
div {
margin: 0 auto;
}

img是行内元素,设置margin: auto也不起作用。
解决方法(网上查的):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lan="en">
<head>
<title>未知大小图片在已知大小容器水平/垂直居中</title>
<meta charset="UTF-8">
<style type="text/css">
#first {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 305px;/*约为高度的0.873,350*0.873 约为305*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:350px;
height:350px;
border: 1px solid #080808;
}
#first img {
/*设置图片垂直居中*/
vertical-align:middle;
border: 1px solid #070707;
}
</style>
</head>
<body>
<div id="first">
<img src="http://www.clker.com/cliparts/h/E/u/o/b/5/snow-flake-icon2-md.png" alt="flake" />
</div>
</body>
</html>

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

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

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

以下为效果图:

img align

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