垂直居中小记 line-height table vertical-align:middle

Posted SONLY_s

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了垂直居中小记 line-height table vertical-align:middle相关的知识,希望对你有一定的参考价值。

垂直居中分两种情况:1.父元素高度确定的单行文本        2.以及父元素高度确定的多行文本。

 

  1.垂直居中-父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的,即此时单行文本的行高line-height=height(父元素块高度)。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。

line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。

 

但是有一个弊端:当文字内容的长度大于块的宽时,就有内容脱离了块:

#sy{
    margin-top:20px;
    text-align:center;
    height:50px;
    line-height:50px;
    width:200px;
    font-size:20px;
    background:#F30;}


<div id="sy">你看我是不是超出了父块元素?</div>

所以这种方法用于网页的页眉或者页脚还是很不错的

 

  2.垂直居中-父元素高度确定的多行文本

    方法一:使用插入 table  (包括tbody、tr、td)标签,同时设置 vertical-align:middle。

        css 中有一个用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。

        (td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。)

 

.jz{
       height:200px;
    background:yellow; }
<table><tbody><tr><td class="jz"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table>

     方法2:通过设置父元素块为:display:table; 子元素为:display:table-cell;vertacal:middle;来让多行文本达到垂直居中效果(类似方法1)

        table此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。

        table-cell : 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)

 

例子1:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行水平垂直居中</title>
    <style type="text/css">
        .no1{
            display: table;
            height: 300px;
            border: 2px solid blue;
            text-align: center;
        }
        .no2{
            
            display: table-cell;
            vertical-align: middle;
            
        }
        
    </style>

</head>
<body>
    <div class="no1">
        <div class="no2">
            <p>搞事情搞事情搞事情</p>
            <p>要打架是不是?</p>
            <p>一百块都不给我!</p>
        </div>
        
    </div>
</body>
</html>

 

例子2:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行垂直水平居中2</title>
    <style type="text/css">
        #no1{
            display: table;
            height: 300px;
            border:  2px solid black;
            text-align: center;
        }
        #no1 p{
            font-size: 20px;
            display: table-cell;
            vertical-align: middle;

        }
    </style>
</head>
<body>
    <div id="no1">
        <p>
            搞事情搞事情搞事情<br>打架是不是?<br>一百块都不给我!
        </p>
    </div>
    
</body>
</html>

  两个例子有不同,剩下的思考思考,动动脑子,总不会有坏处,思考留评论让我看看你们的想法哇

 

 

以上是关于垂直居中小记 line-height table vertical-align:middle的主要内容,如果未能解决你的问题,请参考以下文章

实现icon和文字垂直居中的两种方法-(vertical-align and line-height)

line-height 垂直居中

怎么设置div中的内容垂直居中

如何在div中垂直居中文本? [复制]

垂直居中

怎么让span在div中垂直居中