以前写图片轮换遇到过,第一次知道
display
:
table-cell
;弄得不漂亮,1个多月后,用JS设置了一把,就好了,额,JS还是强大
使用纯 CSS 实现未知尺寸的图片(但高宽都小于200px)在 200px 的正方形容器中水平和垂直居中。
题目的难点在于两点:
- 垂直居中;
- 图片尺寸未知;
至于如何解决,下面是一个权衡的相对结构干净的 CSS 解决方法:
CSS Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
.box {
border
:
1px
solid
#eee
;
/* 设置水平居中 */
text-align
:
center
;
/* 非IE的主流浏览器识别的垂直居中的方法 */
display
:
table-cell
;
vertical-align
:
middle
;
/* 针对 IE 的 Hack */
*
display
:
block
;
/* 防止非 utf-8 引起的 hack 失效问题,如 gbk 编码 */
*
font-family
:
Arial
;
/* 约为高度的 0.873, 200*0.873 约为 175 */
*
font-size
:
175px
;
height
:
200px
;
width
:
200px
;
}
.box img {
/* 设置图片垂直居中 */
vertical-align
:
middle
;
}
|
HTML Code:
1
2
3
|
<
div
class
=
"box"
>
<
img
src
=
"http://img.baidu.com/img/image/imglogo.gif"
/>
</
div
>
|