css vertical align對(duì)齊規(guī)則是什么

這篇文章主要介紹“css vertical align對(duì)齊規(guī)則是什么”，在日常操作中，相信很多人在css vertical align對(duì)齊規(guī)則是什么問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css vertical align對(duì)齊規(guī)則是什么”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

　　cssvertical-align對(duì)齊規(guī)則起作用的前提條件，只能應(yīng)用于內(nèi)聯(lián)元素以及display值為table-cell的元素。vertical-align屬性只能作用在display計(jì)算值為inline、inline-block，inline-table或table-cell的元素上。因此，默認(rèn)情況下，span、strong、em等內(nèi)聯(lián)元素，img、button、input等替換元素，非html規(guī)范的自定義標(biāo)簽元素，以及<td>單元格，都是支持vertical-align屬性的，其他塊級(jí)元素則不支持。

　　vertical-align：inline-block和baseline

　　vertical-align屬性的默認(rèn)值baseline在文本之類的內(nèi)聯(lián)元素那里就是字符x的下邊緣，對(duì)于替換元素則是替換元素的下邊緣。但是，如果是inline-block元素則規(guī)則要復(fù)雜了：一個(gè)inline-block元素，如果里面就是沒有圖文內(nèi)容，或者overflow不是visible，則該元素的基線就是其margin底邊緣；否則其基線就是元素里面最后一行內(nèi)的圖文的基線。見demo：inline-block元素的vertical-align.html

　　vertical-align:middle實(shí)現(xiàn)垂直居中

　　內(nèi)聯(lián)元素：元素的垂直中心點(diǎn)和行框盒子基線往上1/2x-height處對(duì)齊。vertical-align:middle定義是元素的中線和字符x中心點(diǎn)對(duì)齊

　　table-cell元素：?jiǎn)卧裉畛浜凶酉鄬?duì)于外面的表格行居中對(duì)齊。table-cell元素設(shè)置vertical-align垂直對(duì)齊的是子元素，但是其作用的并不是子元素，而是table-cell元素自身。就算table-cell元素的子元素是一個(gè)塊級(jí)元素，也一樣可以讓其有各種垂直對(duì)齊表現(xiàn)。

　　middle將元素盒子的垂直中點(diǎn)與父盒子的baseline加上父盒子的x-height的一半位置對(duì)齊這里元素盒子的垂直中點(diǎn)容易確定，父盒子的baseline也好確定，但是x-height要進(jìn)行計(jì)算得到，這個(gè)x-height就是字母x的高度。

到此，關(guān)于“css vertical align對(duì)齊規(guī)則是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！