zoukankan      html  css  js  c++  java
  • 如何令文本在块级元素中垂直居中

    一,使用line-height样式

    <style>
        div {
             300px;
            height: 200px;           // 元素高度
            background: lightgray;
            line-height: 200px;     // line-height值与元素高度值保持一致 
        }
    </style>
    <div>这段文字将垂直居中</div>
    

      只适用于内容为单行文本、且元素高度已经指定的情况下。多行文本将溢出,未指定元素高度则无法确定line-height的值。

    二,使用padding样式

    <style>
        div {
             300px;
            background: lightgray;
            padding: 40px;
        }
    <style>
    <div>这段文字将垂直居中</div>
    

     

      仅限于元素高度不确定的情况下,如果指定了元素高度,这种方法就不适应了。

    三,使用display将元素模拟为表格

    <style>
        div.outer {
             300px;
            height: 200px;
            background: lightgray;
            display: table;
        }
        div.inner {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
    <div class="outer">
        <div class="inner">这段文字将垂直居中,无论这段文字是多行还是单行,他都能完美的显示在块级元素中间。</div>
    </div>
    

      这种方法嵌套了一个新的div,将div.outer显示为表格,div.inner显示为单元格,而单元格具有valign属性,因此vertical-align可对其产生作用。比第二种方法优秀的是,这种方法也适用于指定了高度的元素。此方法缺点是不支持IE6。

     

  • 相关阅读:
    python 练习洗牌
    python 生成二维码
    转载 HTTP协议
    分别使用python和java练习冒泡排序
    python-字符串
    [转]三层架构与MVC之间的区别
    [转]JAVA异常
    [转]JavaEE开发基础
    [转]JAVA对象容器
    数据库操作实例
  • 原文地址:https://www.cnblogs.com/GUOZHENY/p/6090059.html
Copyright © 2011-2022 走看看