css vertical align對齊規則是什么

這篇文章主要介紹“css vertical align對齊規則是什么”，在日常操作中，相信很多人在css vertical align對齊規則是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css vertical align對齊規則是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

　　vertical-align：inline-block和baseline

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

　　vertical-align:middle實現垂直居中

　　內聯元素：元素的垂直中心點和行框盒子基線往上1/2x-height處對齊。vertical-align:middle定義是元素的中線和字符x中心點對齊

　　table-cell元素：單元格填充盒子相對于外面的表格行居中對齊。table-cell元素設置vertical-align垂直對齊的是子元素，但是其作用的并不是子元素，而是table-cell元素自身。就算table-cell元素的子元素是一個塊級元素，也一樣可以讓其有各種垂直對齊表現。

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

到此，關于“css vertical align對齊規則是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！