zoukankan      html  css  js  c++  java
  • CSS多行文字垂直居中的两种方法

    <div class="middle-box">
        <div class="middle-inner">
            <p><span class="suc-tip">前端开发博客,专注前端开发和web教程</span><br/><span class="suc-link">快捷入口:<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
            <p style="display:none;"><span class="suc-tip">5年的老博客,一直致力于WEB开发</span></p>
        </div>
    </div>

    第一种:display:table的方法

    .middle-box{display: table; height: 300px;}
    .middle-inner{display: table-cell; vertical-align:middle; text-align:center;}

    不兼容ie6、ie7

    第二种:定位

    <!--[if lt IE 8]>
    <style>
    .middle-inner { position: absolute; top:50%;}
    .middle-inner p {position: relative; top: -50%}
    </style>
    <![endif]-->

    兼容写法:

    .middle-box{display: table; height: 300px; border:1px solid #ff0000; width:400px; margin:0 auto; position:relative;}
    .middle-inner{display: table-cell; vertical-align:middle; *position:absolute; *top:50%; *left:50%; width:100%; text-align:center;}
    .middle-inner p{position:relative; *top:-50%; *left:-50%;}

    原文:http://caibaojian.com/css-vertical-middle.html

  • 相关阅读:
    Google glass GDK
    Google glass GDK
    Google glass GDK
    趣味开发
    Android
    Google glass GDK
    Google glass GDK
    Google glass GDK
    Android
    Google glass GDK
  • 原文地址:https://www.cnblogs.com/xulei1992/p/7717075.html
Copyright © 2011-2022 走看看