返回列表 发新帖

css中不确定高度垂直居中2种方法

143.0k 10
swmozowtfl 发表于 2015-7-18 00:12:08|湖北 | 查看全部 阅读模式
例子1
4 D+ `0 J" z/ u+ F3 n1 y不确定高度垂直居中
0 o4 w0 F- g! Y+ `6 G5 }3 }代码如下:' G3 w8 S, @- Y
/* center < */. ~' K! u: n4 I( B0 i
.vetically {
  c3 M, n: [% a) Kvertical-align: middle;, i: v- M# k3 o
display: table-cell;' g; B5 S& H3 K& ?1 b
*position: relative;- O' Y  ^8 Y/ L; B2 T% K
}
9 N1 Y0 y. H2 j+ d% E.vetically_c {
% C5 B5 y$ l- D# m- }! `display: block;6 \: v4 R: N6 ^( _/ h  l
margin: 0 auto;7 r) @# N+ P0 J' Q& l3 B
text-align: center;
2 K" Y8 c& I8 Z& r+ u& S*position: absolute;/ w& @% X" X( U6 r" t
*top: 50%;
+ f" V7 z: a1 D' W*left: 50%;
; l! Y. p' _5 H2 |! H! O*margin-top: expression(-(this.height ) / 2);
* e8 Y8 v) W3 l8 K*margin-left: expression(-(this.width ) / 2);
( E* t( j1 l* c4 q( j. Q) ^! _* b8 ~}  F& |3 K) _3 [) H0 k/ [7 F
/* center > */4 }9 Z3 o0 K! |. {, B
例子2
. f# y# g9 d) E# y- Z标准浏览器的情况还是和上面一样,不同的是针对ie6/ie7利用在img标签的前面插入一对空标签的办法。
" P4 `6 _- E- o0 t( U- }/ {1 \! P代码如下:: X+ M0 `# e  j9 b! I, O) [( q5 C
<html xmlns=>
" V% @! w! e8 F9 R+ O<head>
- T% T( Q. f: L( v3 E8 \8 T<meta http-equiv=content-type content=text/html; charset=gb2312 />  Z# o. z: W2 V; v
<title>方法2 - 未知高度的图片垂直居中</title>
5 @6 B. E, C: c<style type=text/css>! W9 C) e6 `' R! F0 r4 Z
body {# _" i( e4 V8 G1 I4 M5 ]) K4 x
height:100%;
8 ]; k9 E* Q2 W  e+ U- {8 h+ \" u* M}) y. C1 w3 J0 M& ^2 B/ p
#box{
  N3 F( ^0 _1 Q: ^, Awidth:500px;height:400px;
8 i# Z  \2 w8 Ndisplay:table-cell;
9 A9 m  Q' |3 j; mtext-align:center;
0 v- f* n) @( u$ \6 k* V  nvertical-align:middle;
. x2 Z6 K: c/ {border:1px solid #d3d3d3;background:#fff;/ R: ~4 U  f& @
}4 t# ^9 `% ?( C- c7 B
#box img{
2 a& `' c5 b6 ]9 B3 x  lborder:1px solid #ccc;, p( Z* ?; D9 h* j9 f
}
1 u5 h4 A2 [1 A- S' U7 a" k3 _</style>: U* c0 W# r1 D0 A. x/ c; e8 w
<!--[if ie]>4 D3 i. m) B0 q- I
<style type=text/css>?' l* J  x3 N- L1 _% o) p
#box i {, P7 n$ V! ^8 O3 p) ^
display:inline-block;
; o! J6 m% @# c/ W; F' Q8 D/ F* Cheight:100%;
( l: u% B3 E/ G" R7 L& V0 }vertical-align:middle9 s! D# j4 }8 {/ A: b
}
2 |. R8 ]0 @, `2 Q# ^+ V#box img {
8 F8 u! R* |2 c( Q: hvertical-align:middle* |$ |8 G* x  _: z( P
}
- L) d& ?' w) P! _</style>
6 H4 D/ {* T1 [3 d. C/ Y: ~<![endif]-->2 q8 _* k3 m9 H& I
</head>; ~5 L8 `0 r8 }3 M3 J' j" q4 ^
<body>+ [9 V; K( X) Y
<div id=box>$ b) Y- M1 {! G/ E& M7 o( P
<i></i><img src=images/demo_zl.png alt= />
0 y% W4 s  |; w) V. t6 |# `) X</div>2 O8 d0 v/ I: u$ s- L, V4 C' ]
</body>% B9 x" H8 ^3 z7 N. I
</html>
0 I$ F; {2 k, j9 Y! A6 F. d
1 C$ Q& R1 Z  d* H/ d8 ]% F( \更多网页制作信息请查看: 网页制作

回复|共 10 个

effoggikeftor 发表于 2015-11-10 20:25:02|Reserved | 查看全部
综上所述,恳请各位官员请勿动用武装力量请勿跨村、跨镇、跨市、跨省、跨国、跨洲、跨星球、跨银河系追捕。确因不抓不足以平民愤,或不抓就领不到薪水养家户口的公职人员,建议携带工作证
seazvyt 发表于 2015-11-10 20:25:43|澳大利亚 | 查看全部
你可是难得来坐坐啊~~~
wwzcdenleclv 发表于 2015-11-10 20:25:55|INNA | 查看全部
要睡觉了 呵呵
bqtklouu 发表于 2015-11-10 20:25:52|美国 | 查看全部
你你你你 呵呵~~~~别这样哦.....
gevaemaidovef 发表于 2015-11-10 20:25:19|北美地区 | 查看全部
晕 在我帖里面找偶像啊??
effoggikeftor 发表于 2016-2-23 20:21:48|INNA | 查看全部
楼主,你要继续努力啊!你是bbs的希望啊!你是网络文学的希望啊!你是整个网络界的希望文学界的希望啊!你是整个人类的希望啊!你是整个太阳系的希望啊!你是整个异次元空间的希望啊!
Mqokjdvq 发表于 2016-2-23 20:21:38|INNA | 查看全部
看完楼主的帖子,我的心情竟是久久不能平静
GoodyFouppy 发表于 2016-2-23 20:22:17|美国 | 查看全部
我也不知道了~~你把我问蒙了 呵呵
effoggikeftor 发表于 2016-2-23 20:21:46|丹麦 | 查看全部
下次有人骂我了...我给他还回去..
Mqokjdvq 发表于 2016-2-23 20:22:31|美国 | 查看全部
要相信自己~智商为0

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

得知互动是一个融创意、设计、开发、营销、生活、互联网于一体的专业交流分享平台。
Copyright © 2026 站长技术交流论坛|互联网技术交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表