查看: 572|回复: 0
打印 上一主题 下一主题

[网页编程] CSS在固定宽高的div内实现垂直居中的实例详解

[复制链接]
跳转到指定楼层
1
发表于 2016-6-20 15:03:48 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
需求案例
, u$ {" Q5 E" U- G, _* Q' f) d
: Z! W* Z: a8 s案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的。很多朋友的做法是头部加一个padding或者margin,这样,里面内容显得貌似是居中了,但是假如内容变化,这样头部的固定padding或者margin,始终不变。造成了垂直方向不会居中!
6 ]# U7 @, W: x3 l9 o9 F* g# L; O) B0 E9 ^9 ]% }
我们知道,假如下面一个div5 p* B% ~% X6 `9 S
  1. haorooms内部内容
复制代码
0 c3 ~) o+ \) S
样式是这样的, }4 ~% Q8 y; e3 e4 Y# G( R
  1. .outer{text-align:center;vertical-align: middle;width:200px;height:350px;}  
复制代码

& u4 g) N  A( \, [vertical-align:middle是不管用的,很多朋友就在.inner上面做文章了,和我上面说的,加margin等等!那对于这种情况,有没有更好的解决方案呢?% S1 ~* m3 P  {# H3 V# ^
解决方法
0 l8 i5 q7 v  Z3 [" ~* L思路:加一个cssHack,设置cssHack的line-height等于外层div的高度,就可以使用vertical-align:middle了!
8 R5 k, a2 K  Y0 e, e9 H) B( ~div如下:7 B' F. d" M/ ?. u4 x% Z4 L  T* `7 v
  1.    
       
    ; d9 R- P2 e7 x
  2.         
    haorooms内部内容
    cssHack
       
    % ^# J: @- S* T! s
  3.    
  ! ~* h: s- h: W  Z1 q# [  Q( c! P
  • 复制代码
    4 @% E* ^1 _. G, ^2 c* n2 Y; j+ P样式如下:
    6 [+ C% @4 ~$ g2 c
    1.     * {   7 V2 D% N9 L/ w. W
    2.         margin: 0;   
      + e- w' k8 e) Y  Q: |) \
    3.         padding: 0;   
      $ V1 E) k! e/ e6 A1 T
    4.     }   / D1 ?, W" u8 w8 k+ c3 p9 f
    5.     .outer {   ! T% ~' x9 a9 v1 [
    6.         background-color: #ccc;   2 T- A; q- a: N* e$ h( G
    7.         font-size: 24px;   5 L3 H$ T- ]8 V& X  |) z
    8.         height: 350px;   - i: D1 U+ Q9 ^7 Y9 s
    9.         text-align: center;     s( m8 Z: p, z) A* ?9 D
    10.         overflow: hidden;   
      / U1 Z- M: l  w) g7 T% l, m) c
    11.         width: 280px;   ) V9 N. \) a3 K# x# |& c/ m
    12.     }   
      ! P: d: ^; y( k9 h9 U
    13.     .outer  .inner,   % {2 s$ \. D5 N1 u$ N
    14.     .outer  .v {   ) z3 M5 A; O" a
    15.         display: inline-block;   
      " G  t' J- l1 l# ?/ v
    16.         zoom: 1;*display: inline; /* 用于触发支持IE67 inline-block */  
      , ~( y, Z4 k  U' |9 V
    17.     }   " T3 z* `% F- L9 R2 g
    18.     .outer  .inner {               
      - [9 R! B4 m& o& L7 x- n
    19.         line-height: 1.8;   & k2 _6 Q9 N7 T' H4 H+ ^
    20.         padding: 0 4px 0 5px;   
      * I$ M* l; ]! `) h$ x7 e& R7 _
    21.         vertical-align: middle;   
      ! W: j" l) O, q$ o4 ]
    22.         width: 262px;              
      & ]! V  _) u4 y9 z) F) m+ |% ]
    23.     }   0 L7 g( W4 |, i5 l; A4 T( V; c! F, w
    24.     .outer  .v {   
      / n' Q% I8 u$ W
    25.         line-height: 350px;   " G4 R6 v1 V* J9 _0 [0 a& G5 X. E
    26.         text-indent:-9999px;   
      9 {4 h; }9 x0 p
    27.         width: 1px;            ! \4 z8 B( v- H  [1 X; _' Z0 y2 a
    28.     }  
    复制代码
    ( x; ^( |9 O+ G6 a! K# J) J- I" [
    这样就实现了div内部的垂直居中了!
    : ~! z) O* A* Z6 \& o& M7 D) y% j4 E/ d5 g9 G3 C
    欢迎访问yabo88狗亚体育app下载地址宗亲网!请牢记我们的主网址:【www.fanwuzi.com】,备用网址:【www.fanjiaren.org】。
    您需要登录后才可以回帖 登录 | 停止注册

    本版积分规则

    小黑屋|手机版|Archiver|yabo88狗亚体育app下载地址宗亲网(范家人) ( 黑ICP备16002281号 )
    邮箱:service_fan#126.com QQ群:① 42116087 ② 2451985 ③ 8913601 | 始创于西元2008年12月8日

    GMT+8, 2019-11-9 19:35 , Processed in 0.089722 second(s), 20 queries , Gzip On. Powered by Discuz! X3.4 Licensed

    快速回复 返回顶部 返回列表