返回列表 发新帖

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

143.2k 10
swmozowtfl 发表于 2015-7-18 00:12:08|湖北 | 查看全部 阅读模式
例子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更多网页制作信息请查看: 网页制作

回复|共 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 得知互动-专注Ai与站长技术交流社区-Ai交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表