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>
  • 相关阅读:
    MVC异常过滤器
    文件分块传输
    UDP广播
    React 还是 Vue: 你应该选择哪一个Web前端框架?
    一个很好的XLSX的操作
    报表神器
    pycharm快敏捷键
    xlwt
    常用的列表和元祖
    HTML,css
  • 原文地址:https://www.cnblogs.com/lhl98/p/3434007.html
Copyright © 2011-2022 走看看