zoukankan      html  css  js  c++  java
  • css样式设置高度不定文本垂直居中

    使用css实现文本垂直居中,对于支持display: table的浏览器来说,是比较容易实现的,只需要对外层div设置为table,内层div设置为table-cell,并设置文本垂直居中即可。但对于IE6/7,并不支持display:table,只能改用定位的方式来处理。外层div给一个定位,中间层div相对外层绝对定位,top为50%,内层span相对定位,top为-50%,通过正负50%的定位,使内容垂直居中。

    相关演示代码(不管怎么改变div1的高度,都可以保证内容垂直居中,内容不限行数):

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>ie中垂直居中</title>
    <meta charset=UTF-8">
    <style type="text/css">
    .div1{
        width:300px;
        position:absolute;
        border:1px solid #000;
        top:100px;
        left:200px;
        display:table;
    }
    
    .div2{
        display:table-cell;
        vertical-align:middle;
        *position:absolute;
        *top:50%;
    }
    
    span{
        *position:relative;
        *top:-50%;
    }
    </style>
    
    </head>
    <body>
    <div class="div1" style="height:200px">
        <div class="div2">
            <span>IE6/7使用定位关系来垂直居中,IE8/9使用display:table和display:table-cell</span>
        </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    从无到有制作Deb包的一个实例
    Redis内存存储结构分析
    岳麓实践论
    金砖四国(巴西、俄罗斯、印度和中国)
    用LLVM开发新语言
    QQ云输入法
    http://baike.baidu.com/view/1926473.htm
    21世纪商业评论
    update ubuntu to 11.10
    gnu make 中文手册教程pdf
  • 原文地址:https://www.cnblogs.com/linerz/p/3294868.html
Copyright © 2011-2022 走看看