定義
vertical-align 屬性設(shè)置元素的垂直對(duì)齊方式。
該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊健霹。允許指定負(fù)長度值和百分比值。這會(huì)使元素降低而不是升高瓶蚂。在表單元格中糖埋，這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式。
基本屬性
- baseline 默認(rèn)窃这。元素放置在父元素的基線上
- sub 垂直對(duì)齊文本的下標(biāo)
- super 垂直對(duì)齊文本的上標(biāo)
- top 把元素的頂端與行中最高元素的頂端對(duì)齊
- text-top 把元素的頂端與父元素字體的頂端對(duì)齊
- text-bottom 把元素的底端與父元素的低端對(duì)齊
- % 使用‘line-height’屬性的百分比值來排列此元素瞳别，允許使用負(fù)值
- inherit 規(guī)定應(yīng)該從父元素繼承vertical-align屬性的值
使用場景
- 單元表格中: 如果給一個(gè)表格的td加一個(gè)vertical-align:middle的樣式，表格里面的內(nèi)容會(huì)垂直居中杭攻，同樣的如果給一個(gè)vertical-align:bottom就會(huì)底部對(duì)齊祟敛，如果給一個(gè)vertical-align:top就會(huì)頂部對(duì)齊。
- 行內(nèi)元素: 假設(shè)有兩個(gè)行內(nèi)元素a和b兆解，a和b都是img馆铁，當(dāng)a加了一個(gè)vertical-align:middle樣式之后，b的底部（基線）就會(huì)對(duì)齊a的中間位置锅睛。
注意： vertical-align屬性是只應(yīng)用于行內(nèi)元素和替換元素埠巨，不適用于塊元素的，但是我們可以給其設(shè)置：disply : table-cell衣撬，將塊元素轉(zhuǎn)化為單元格乖订，然后再使用vertical-align屬性扮饶。
補(bǔ)充： 使用百分比：此標(biāo)簽繼承的line-height值決定的具练。
