例子1) q+ s; t% Q' c( p* [. c6 h* N9 a& n
不确定高度垂直居中$ X% C9 u- x! O2 U9 o9 E/ }- n" {
代码如下:
. t& t7 x9 h! L4 N0 m% Q/* center < */
1 u: m3 l; R0 d, j4 O; D.vetically {
. Q( x) |1 h0 Yvertical-align: middle;
* w4 ?8 v z, b" F8 ~display: table-cell;
9 F6 F' `" q' P+ E( j6 O*position: relative;/ N3 b, b, x) R- K
}
+ @. `2 h$ B- |$ N7 O& o.vetically_c {) ?; O, ?+ p! A$ K8 x c
display: block;
. W. f7 V4 C# _& o, i3 qmargin: 0 auto;) g. H7 }$ M, m( Z
text-align: center;
$ h; l+ s; Q- D+ w2 U- N5 F*position: absolute;! _" m, a5 L/ R8 k; l
*top: 50%;
4 `9 ~) @9 @2 J q" s) u*left: 50%;
3 B2 J9 d- f( t: e*margin-top: expression(-(this.height ) / 2);$ u' \2 u" q, }* Q U; O
*margin-left: expression(-(this.width ) / 2);
. X+ J2 p; i9 O3 g. X7 i}: H! r7 J4 R9 P( K* ?) n$ \
/* center > *// D! ~; {4 c- o1 N% Z4 s# B( @6 y9 X
例子2* p; j6 H, N |6 m
标准浏览器的情况还是和上面一样,不同的是针对ie6/ie7利用在img标签的前面插入一对空标签的办法。
J" o& c# Z+ q代码如下:" l7 T' H- p. U* v& ]+ v
<html xmlns=>+ N* b3 t3 N0 P2 ]
<head>
. j# l+ K& P# _<meta http-equiv=content-type content=text/html; charset=gb2312 />: K% O! ]! i. W1 }5 \2 B
<title>方法2 - 未知高度的图片垂直居中</title>6 h& l& p' h) z6 N: Z2 E& T
<style type=text/css>
* j' i: v6 Y0 }) H$ ~body {5 s+ a- W4 f) f1 C; Q
height:100%;
+ E$ G! h' G7 B; n. ]! L. I}, ^% S1 w. u9 x: n5 p" C; z$ J- R
#box{
# m" {- E8 g, _3 k' Uwidth:500px;height:400px;5 V+ s% Z" ^8 V7 b
display:table-cell;! b- a5 f+ v$ ?
text-align:center;
- o1 o: K: H7 Zvertical-align:middle;2 Z* K. l$ E3 v r
border:1px solid #d3d3d3;background:#fff;; l: D- ~2 v c* _0 `
}
/ \& [/ X' K" T. s6 [ h#box img{
- G7 x# T) Q1 U, B4 s K3 mborder:1px solid #ccc;1 N; A0 z6 x" N$ R Z- s
}
- i$ N5 B# C- i2 g$ F" X/ c" {* C</style>
2 M* C0 u3 _4 ]/ H<!--[if ie]>
: S, A5 L. B# ?# |+ z) B<style type=text/css>?8 N8 n3 E w8 }/ N" J5 F
#box i {
- g I1 C" N$ h6 x0 w9 d$ odisplay:inline-block;
; ]+ L6 M% X4 uheight:100%;
6 x- }; Z0 l+ i8 a& _; }6 fvertical-align:middle! L8 A3 N. I+ F/ k1 E0 ]% k
}( t" \0 h$ O/ [7 R8 }
#box img {
" N# J* ?- C5 D \vertical-align:middle
( E! |$ x5 A& i" b, W" t+ v}
3 w4 X9 H5 P0 c! ?* s</style>
5 H( O* n8 {9 y$ D F- Q<![endif]-->
& W9 _' i% _1 n! }# O8 x G, D5 ]</head>2 t, r: n9 T9 x$ X, l! @. ^
<body>* O! r, [0 V Y! P' u2 l, U1 ^6 ?
<div id=box>. X1 u: ?1 \1 h7 G$ H0 s
<i></i><img src=images/demo_zl.png alt= />2 w8 Z3 f' w/ J, i5 i) l
</div>
3 P. _$ p6 ] _( }" W</body>
3 v0 f( _" K2 h X, R0 F# `</html>
; `0 b7 `0 z! p# F% `8 w
* w* e8 Q- E; f/ o更多网页制作信息请查看: 网页制作 |