码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-09-16 23:20:19      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:pre   display   logs   单行   str   小伙伴   lin   http   center   

垂直居中分两种情况: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>

技术分享

 

 

 

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

标签:pre   display   logs   单行   str   小伙伴   lin   http   center   

原文地址:http://www.cnblogs.com/SONLY-s/p/7533057.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!