none
div 垂直居中 RRS feed

  • 问题

  • 网上看了好多资料,div要垂直居中,都是利用两个以上的div ,然后再设定两者的关系。那么div垂直居中真的要那么复杂吗?有没有简单易行的吗?
    这句vertical-align:middle;在什么情况下才有作用?
    2009年7月7日 2:21

答案

  • 针对于table,td里的文字或图像,div垂直居中太麻烦了。。。
    偶试了N半天放弃了。。改用table了。。
    没有必要为了div而用div..数据显示还用table来的方便。。
    热销情侣/结婚礼物 北欧原木猫猫 欧式田园家居摆件 意大利缘分娃娃http://shop33905141.taobao.com
    • 已标记为答案 lfj0912 2009年7月8日 4:31
    2009年7月7日 4:19
  • vertical-align:middle 在div无效的  在table有效的
    • 已标记为答案 lfj0912 2009年7月8日 4:32
    2009年7月7日 8:48

全部回复

  • 你好 你可以试下
    .middle{
    display: table-cell;
    height: 300px;
    vertical-align: middle;}
    不过ie不支持

    还可以这样 支持所有浏览器

    div#demo-5{height: 300px;position: relative}
    div#demo-5 div{position: absolute;top: 50%;left: 0}
    div#demo-5 p{position: relative;top: -50%}
    div#main-wrapper>div#demo-5{position: static;display:table}
    div#main-wrapper>div#demo-5>div{display:table-cell;vertical-align:middle;position:static}


    <div id="main-wrapper">
    <div class="demo" id="demo-5">
    <div><p>文字 文字文字文字文字文字文字</p></div>
    </div>
    </div>



    Wenn ich dich hab’,gibt es nichts, was unerträglich ist.坚持不懈!http://hi.baidu.com/1987raymond
    2009年7月7日 2:52
    版主
  • 针对于table,td里的文字或图像,div垂直居中太麻烦了。。。
    偶试了N半天放弃了。。改用table了。。
    没有必要为了div而用div..数据显示还用table来的方便。。
    热销情侣/结婚礼物 北欧原木猫猫 欧式田园家居摆件 意大利缘分娃娃http://shop33905141.taobao.com
    • 已标记为答案 lfj0912 2009年7月8日 4:31
    2009年7月7日 4:19
  • 最近很活跃么  lee桑~~
    2009年7月7日 4:23
  • 谢谢大家!
    感觉到这句vertical-align:middle;形同虚设。
    2009年7月7日 5:49
  • vertical-align:middle 在div无效的  在table有效的
    • 已标记为答案 lfj0912 2009年7月8日 4:32
    2009年7月7日 8:48