一壹士、vertical-align介紹 MDN
- CSS屬性指定內(nèi)嵌或表格盒的垂直對(duì)齊
- 只對(duì)內(nèi)聯(lián)盒子和內(nèi)聯(lián)塊級(jí)盒子起作用
- 一個(gè)內(nèi)聯(lián)盒子的默認(rèn)基線為：
The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.
‘inline-block’的基線是正常流中最后一個(gè)line box的基線, 除非疆液，這個(gè)line box里面既沒有l(wèi)ine boxes或者本身’overflow’屬性的計(jì)算值而不是’visible’, 這種情況下基線是margin底邊緣。
二尊浪、vertical-align屬性
/* Keyword values */
vertical-align: baseline; //默認(rèn)值
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* <length> values */
vertical-align: 10em;
vertical-align: 4px;
/* <percentage> values */
vertical-align: 20%; //相對(duì)于行高
/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;
1、線性類屬性 top middle bottom
- top / bottom
內(nèi)聯(lián)盒子的頂部與 行盒子(line-boxes) 的頂部對(duì)齊
內(nèi)聯(lián)盒子的底部與 行盒子 的底部對(duì)齊
- middle
將元素的中間與基線加上父元素的x高度的一半對(duì)齊封救，并非垂直對(duì)齊拇涤。
也就是元素會(huì)與X字符的一半高度對(duì)齊
image.png
2、文本類屬性 text-top / text-bottom
內(nèi)聯(lián)盒子的頂部與行盒子的content area(內(nèi)容區(qū)域)頂部/ 底部對(duì)齊
tips ! 有時(shí)候改變某個(gè)內(nèi)聯(lián)元素的vertical-align會(huì)改變父級(jí)元素的高度誉结，或者出現(xiàn)的各種排版方式鹅士，記住vertical-align只會(huì)改變自身的垂直對(duì)齊方式,并不會(huì)影響其他元素的垂直位置。
三惩坑、vertical-align作用機(jī)制
1掉盅、圖片的底部空白
該空白由行高內(nèi)容的行高撐開，因?yàn)閮?nèi)聯(lián)盒子默認(rèn)為基線對(duì)以舒，所以圖片的底部文本的基線對(duì)齊趾痘，所以多出了文本內(nèi)容基線以下的部分高度。
- 解決辦法: 設(shè)置字體大小為0蔓钟； 或者改變圖片的vertical-align;
font {
font-size: 0;
}
// 或者
img {
vertical-align: bottom;
}
2永票、垂直居中對(duì)齊機(jī)制
vertical-align: middle;實(shí)現(xiàn)了近似的垂直居中;其實(shí)圖片是X的一半高度位置對(duì)齊的，而X的一半高度處是不和父盒子的中心線對(duì)齊的滥沫。
- 實(shí)現(xiàn)垂直居中如下
p {
background: #ccc;
height: 240px;
}
p > i {
display: inline-block;
vertical-align: middle;
height: 100%;
}
p > img {
width: 200px;
vertical-align: middle;
}
i 元素為輔助元素侣集，他的作用就是使圖片的中心線和他的中心線對(duì)齊，而該元素設(shè)置為父元素的高度兰绣，所以就實(shí)現(xiàn)了垂直居中肚吏。
