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

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐。写这篇文章是因为要兼容IE6、IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中,如果是多行这个肯定不行,而我的同事因为这个用了js来实现居中对齐,我觉得这是很难理解的。故而整理这篇文章。

    HTML代码:

    <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]--
    

      

    可以使用IE的特有的条件语法,不过我习惯用ie hack来写。下面这个的代码实现了水平垂直多行代码(支持一行)居中对齐。目前测试IE、chrome和Firefox均兼容。代码如下:

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

      

    以后遇到居中问题,这三句CSS就够用了。更多的css3 flexbox、margin负值等兼容性还需要探讨。

    演示

    第二种方法:增加一个空白标签

    HTML代码:

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

      

    CSS代码:

    .middle-box{height:300px; border: 1px solid #f00;  400px; margin: 0 auto; text-align: center; }
    .middle-box p{vertical-align: middle; display: inline-block; *display: inline; *zoom: 1;}
    .visible{height: 100%; vertical-align: middle;  0; display: inline-block;}
    

      

    演示:居中对齐

  • 相关阅读:
    MySQL-基本sql命令
    Java for LeetCode 203 Remove Linked List Elements
    Java for LeetCode 202 Happy Number
    Java for LeetCode 201 Bitwise AND of Numbers Range
    Java for LeetCode 200 Number of Islands
    Java for LeetCode 199 Binary Tree Right Side View
    Java for LeetCode 198 House Robber
    Java for LeetCode 191 Number of 1 Bits
    Java for LeetCode 190 Reverse Bits
    Java for LeetCode 189 Rotate Array
  • 原文地址:https://www.cnblogs.com/freespider/p/6582500.html
Copyright © 2011-2022 走看看