例子1
* \7 e5 e# |# l4 Z$ P. A不确定高度垂直居中
+ n. H- I0 e" l) Z. {代码如下:
2 d! E1 G3 M$ } s/* center < */
" f5 j+ {, _/ ^.vetically {
9 U9 b7 I; ^4 A9 p7 u( L0 q5 Vvertical-align: middle;
- d! d* a2 k/ L" E) p7 j! ?! Idisplay: table-cell;5 r$ O8 m8 x" Q) g* z- R8 Q
*position: relative;% e e# B6 d8 {2 J
}* A" E- ^* ~( y
.vetically_c {
, J4 b7 I! v9 `display: block;0 e" C; S) v% H3 J. n9 W9 G
margin: 0 auto;' n+ c5 @* `# N
text-align: center;/ M5 w4 ~1 M& g. p' o- m
*position: absolute;
+ }; W) |1 R( N1 V( G*top: 50%;7 c7 E* N, [1 K
*left: 50%;+ D( c5 n% M0 F7 Q# K5 c
*margin-top: expression(-(this.height ) / 2);
( v2 x$ `6 F% F* _/ }, U; M*margin-left: expression(-(this.width ) / 2);$ m$ r0 a4 [9 o! E+ Q2 Z
}7 q1 A6 s' h" ]0 \+ ^' @! p
/* center > */& \! @; a& j/ J, H
例子2
, Z- c. N, r5 c4 @! X5 J0 ~标准浏览器的情况还是和上面一样,不同的是针对ie6/ie7利用在img标签的前面插入一对空标签的办法。7 F' p, C' h7 G! w* v( `
代码如下:7 s# v; L5 H, }, U& u' e) m \$ _
<html xmlns=>
9 d- T0 r2 E" @, h4 s& y5 H<head>, w6 I# S2 I3 c9 I
<meta http-equiv=content-type content=text/html; charset=gb2312 />
- q5 ^' f* w# s, o% T. n: |<title>方法2 - 未知高度的图片垂直居中</title>
3 x* Y$ s5 F- X/ e<style type=text/css>
$ g0 \. a! Y: b1 Tbody {7 V1 f4 X5 M& h! h% W
height:100%;
* c- K3 F! w: @, r, d" a}4 | c) B4 o0 X) j4 K
#box{
; j5 P# Y- I5 C/ K3 Nwidth:500px;height:400px;; C. `$ E2 C3 E# A$ q8 ]3 P
display:table-cell;
) P; t* z. m+ z7 Atext-align:center;0 D) ` _) x/ f' T8 @. l5 Y( s
vertical-align:middle;
5 k: M, _2 B! B$ o, ]$ Nborder:1px solid #d3d3d3;background:#fff;2 B8 k! a7 b, p& y
}1 `2 m! W5 |! R# O+ o0 p" E! N
#box img{
, t# D4 m5 n: W& k* Y4 `border:1px solid #ccc;9 K; E% Q& N! z$ E7 E( m
}
( [8 g- [0 a( f# \</style>6 M% O" u: Y8 a& A$ q" Q; z* v
<!--[if ie]>1 T/ `( [( G; K
<style type=text/css>?
. [4 I# j; n. g! {; `# f9 i#box i {
/ o0 v, Y) n# Y8 Xdisplay:inline-block;. [: u: s. n2 u+ {
height:100%;6 J- K. K: k8 _2 }1 }8 @7 j
vertical-align:middle3 r3 y8 h0 E/ h2 |* \) o! n
}
1 [: U& C4 k* I7 P0 K; d4 @- Z#box img {
$ F" C+ { B" w0 ]$ G9 Q8 @vertical-align:middle+ ^0 } U4 f5 a+ [
}6 a/ Q. a& O. Y- B! x5 y4 m( u
</style>; J I* N% t- d* y. U9 I0 ~7 T
<![endif]--># Z: u" ]6 n; i4 l* n& e' c( ~& K
</head>; s0 [/ k/ t4 U8 s, E
<body>5 [0 f6 ?( s: U. ]! F2 p) _' u
<div id=box>
- n0 G4 z( l/ G, w# C8 F2 K( z7 `<i></i><img src=images/demo_zl.png alt= />
* B5 S. T( b Z1 b4 r; I/ c; I</div>
1 [ i& |. d9 Q: ^9 l</body>; M6 d$ `) G' r) V8 r
</html>
q; _2 v( C6 L& d; L/ ^+ i
$ n) O+ Z( e+ {9 B更多网页制作信息请查看: 网页制作 |