大家好，我是IT修真院武漢分院第10期學(xué)員余佳貝颖变，一枚正直善良的web程序員生均。
今天給大家分享一下，修真院官網(wǎng)css任務(wù)5悼做，深度思考中的知識點(diǎn)——如何理解line-height與vertical-align疯特？
一.背景介紹
我們在使用css來布局時經(jīng)常需要進(jìn)行居中，有時一個屬性就能搞定肛走，有時則需要一定的技巧才能兼容到所有瀏覽器漓雅， 利用css來實(shí)現(xiàn)對象的垂直居中和水平居中有許多不同的方法，今天我分享的line-height和vertical-align就是實(shí)現(xiàn)垂直居中常見的用法.
二.知識剖析
1.line-height的基本概念
定義：行高是指文本行基線baseline之間的垂直距離
行高是可以被繼承的朽色，數(shù)字可以直接被繼承邻吞，然后在計算行高；而百分比是先計算出行高葫男，在以px繼承
行高line-height實(shí)際上只影響行內(nèi)元素和其他行內(nèi)內(nèi)容抱冷，而不會直接影響塊級元素，也可以為一個塊級元素設(shè)置line-height梢褐，但這個值只是應(yīng)用到塊級元素的內(nèi)聯(lián)內(nèi)容時才會有影響旺遮。在塊級元素上聲明line-height會為該塊級元素的內(nèi)容設(shè)置一個最小行框高度。
2.vertical-align基本概念與應(yīng)用
定義：使行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊
注意：vertical-align的百分比值不是相對于字體大小或者其他什么屬性計算的盈咳，而是相對于line-height計算的耿眉。
3.常見問題
圖像元素在塊級元素底部為什么留有空白？
原因是行內(nèi)元素默認(rèn)都受vertical-align（垂直對齊方式）和line-height（行高）的影響鱼响， 而vertical-align默認(rèn)的對齊方式是baseline,即基線對齊鸣剪。 這個基線就是span標(biāo)簽里的字母X的下邊沿，故圖片底部是與字母底部相對齊的（不是與span標(biāo)簽的背景對齊）丈积。 又因?yàn)樽帜副旧碛衛(wèi)ine-height（行高）值筐骇，所以span標(biāo)簽加上背景后比字母要高一些。
4.解決方案
解決方法：（四種方法任意一種都可解決該問題）
（1）江滨、將整個p內(nèi)的font-size設(shè)置為0铛纬；
（2）、將圖片img變?yōu)閴K級元素唬滑，即設(shè)置其為display:block;
（3）告唆、給p設(shè)置一個行高（值盡量小些）莫秆，設(shè)置為line-height:5px;
（4）、設(shè)置圖片img垂直對齊方式vertical-align,值為top/middle/bottom任意一個都可以（為了覆蓋默認(rèn)的值baseline）;
5.編碼實(shí)戰(zhàn)
6.拓展思考
還有哪些方法可以實(shí)現(xiàn)垂直居中悔详？
1.單行文字垂直居中使用line-height屬性
2.使用table-cell布局
display: table-cell;
vertical-align: middle;
text-align: center;
3.使用flex彈性布局
display: flex;
justify-content:center;
align-items:center;
4.絕對定位和負(fù)邊距
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
5.使用transform
.box4 {
position: relative;
}
.box4 span{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
}
7.參考文獻(xiàn)
深入理解line-height與vertical-align
8.更多討論
有沒有其他方法實(shí)現(xiàn)垂直居中
