zoukankan      html  css  js  c++  java
  • 父元素高度确定的多行文本、图片、块级元素的竖直居中

      CSS中有一个竖直居中的属性 vertical-align,但只有当父元素为td或者th时,这个vertical-align属性才会生效,对于其他块级元素,例如div、p等,默认情况下是不支持vertical-align属性的。

      在Firefox和IE 8下,可以设置块级元素display类型为table-cell,激活vertical-align属性,但是IE 6 和 IE 7 并不支持display:table-cell。但可以通过特定格式的hack,使之支持。

    <style type="text/css">
        .mb10{margin-bottom:10px;}
        .wrap{ background:#000; width:500px; color:#FFF; margin-bottom:10px; height:100px;
    display:table-cell; vertical-align:middle;*position:relative;} .test{width:200px;height:50px;background:red;} .verticalWrap{*position:absolute;*top:50%;} .vertical{*position:relative;*top:-50%;} </style> <div class="mb10"> <div class="wrap"> <div class="verticalWrap"> <div class="vertical"> hello world!<br /> hello world!<br /> hello world! </div> </div> </div> </div> <div class="mb10"> <div class="wrap"> <div class="verticalWrap"> <div class="vertical test"> </div> </div> </div> </div>
  • 相关阅读:
    P1772 [ZJOI2006]物流运输
    P3951 小凯的疑惑
    P1082 同余方程(【模板】exgcd)
    T107741 【模板】权值线段树合并
    P3205 [HNOI2010]合唱队
    P1062 数列
    P1144 最短路计数
    P1502 窗口的星星
    P4147 玉蟾宫(【模板】悬线法)
    CSP模拟赛#3 分段(T1-26)
  • 原文地址:https://www.cnblogs.com/lhl98/p/3434007.html
Copyright © 2011-2022 走看看