垂直居中小記 line


垂直居中分兩種情況: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>

 

 

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com