例子1
) J/ \* G2 D$ {5 z6 U7 J- I5 r不确定高度垂直居中
. l* }: @8 _9 Z( ]# e代码如下:" }* p+ t9 c4 V- {9 f" |6 ~
/* center < */. q8 S/ ]" g# p0 O
.vetically {
@) [$ g& X; fvertical-align: middle;
1 A$ t7 I1 d/ r8 s1 [' Kdisplay: table-cell;1 q/ Z/ L, G# P: D7 D2 U
*position: relative;
3 S* |6 t0 R; M+ M n4 n) l* d}
2 C5 c, e7 r6 l1 K6 p8 m.vetically_c {
* D& G, R* W& _7 |: odisplay: block;
& H4 F, q- s+ Y, S9 smargin: 0 auto;
8 F$ D7 G) d% v4 S/ L, X0 ]" ~text-align: center;, `" f: b; B1 Q3 @) ^
*position: absolute;
5 E2 t& p8 y! d4 C/ t5 C*top: 50%;; _/ J. K! E1 D& s( |
*left: 50%;! ]9 u- U6 J9 J2 E$ A" E
*margin-top: expression(-(this.height ) / 2);/ @+ e. z. p9 y/ ]8 n
*margin-left: expression(-(this.width ) / 2);
: P7 n7 B: `, [. u4 O" x}
6 T2 N$ m7 L: k/* center > */
* y. |% J' Z8 ~, q" i例子2 m4 n; }! k- N. o5 u$ ]
标准浏览器的情况还是和上面一样,不同的是针对ie6/ie7利用在img标签的前面插入一对空标签的办法。
$ U. _+ n+ f7 j代码如下:3 n1 Q H/ b! V# ]9 V) F: Y
<html xmlns=>
& D. ?9 l, ]( ^8 a: b7 S u$ f& C<head>7 o1 A4 a! x F) Y+ {' D
<meta http-equiv=content-type content=text/html; charset=gb2312 />
9 }" `$ I) r& U. p% X( e" ^<title>方法2 - 未知高度的图片垂直居中</title>- [0 }' k% B0 J" t; @6 }! t; i
<style type=text/css>
) h: E# C8 o9 bbody {) m& _ C# ^. U
height:100%;- E! H$ Q) I' _* n& s
}1 Y/ g8 _* d$ [
#box{
9 L9 F+ c# l, F% J0 u+ q/ rwidth:500px;height:400px;7 {( f6 A: F; ^) m' t5 W4 H2 f. D
display:table-cell;: U1 W* G3 v: _4 l! S
text-align:center;
4 f* i# }* o, z$ H: N% {vertical-align:middle;2 w; ?# o" c/ Z4 m$ K
border:1px solid #d3d3d3;background:#fff;" O) g$ s2 N0 {
} i- L# A& G4 \- O6 b
#box img{
6 G. w( S& ]) e( d, ^" p3 Lborder:1px solid #ccc;( Z! v: |% Z7 Z5 o
}
! s5 @) |/ A; @2 X: a</style>
( j% z) I& K- Q8 e& E<!--[if ie]>, ^9 B/ w8 W- i4 Y
<style type=text/css>?
4 r% a" t+ I% w* J2 Q( N9 q7 C#box i {
0 s8 ^3 }: r% l) {5 Mdisplay:inline-block;0 {- `' X6 {& g
height:100%;
3 a- G/ T% S! Uvertical-align:middle* V: A8 M, S+ _4 V6 B1 A4 L) X
}, X# n- C9 d8 I. }1 K9 r# Z+ g
#box img {
7 J$ P' T0 m+ s! O% \ ?# y9 qvertical-align:middle& g8 T4 A7 L1 M* r! M. n
}
4 k1 a) c2 J% }* c: M5 z4 |; M</style>
0 O' D( s( n+ A+ T6 ^<![endif]-->0 }9 F! Z; ]8 Y9 ^
</head>5 L2 @8 D( ^& j) k6 i
<body>
/ H! P. R5 w/ g1 s0 X4 i* b! U<div id=box>$ I; H" i: D0 [5 C2 V/ P
<i></i><img src=images/demo_zl.png alt= />
7 w1 Y9 t* _ v- @4 C; c</div>$ ^+ _1 Z& U7 w2 i3 m7 M
</body>
+ s, ^2 L# |/ ]+ x B. o3 w</html>, N$ q* u$ v% B
1 b' p, p1 f$ W# L. |8 U更多网页制作信息请查看: 网页制作 |