vertical-align你爲何不生效

用vertical-align:middle。然而用的時候老是無效。因此決定看一看本身到底錯在了哪裏。

做用環境： 父元素設置line-height。

做用對象： 子元素中的inline-block和inline元素。

 

---

 

1、父元素設置 line-height

 

• 父元素（inline-block\block）必須含有line-height（inline元素有無皆可），子元素中的（inline-block/inline元素）vertical-align才能起做用。

• vertical-align不可繼承，必須對子元素單獨設置。

在父元素定義了line-height的條件下，vertical-align的做用是讓（inline/inline-block）子元素依據父元素的基點對齊。

 

值	描述
長度	經過距離升高（正值）或下降（負值）元素。'0cm'等同於'baseline'
百分值 – %	經過距離（相對於1line-height1值的百分大小）升高（正值）或下降（負值）元素。'0%'等同於'baseline'
baseline	默認。元素的基線與父元素的基線對齊。
sub	下降元素的基線到父元素合適的下標位置。
super	升高元素的基線到父元素合適的上標位置。
top	把對齊的子元素的頂端與line box頂端對齊。
text-top	把元素的頂端與父元素內容區域的頂端對齊。
middle	元素的中垂點與 父元素的基線加1/2父元素中字母x的高度 對齊。
bottom	把對齊的子元素的底端與line box底端對齊。
text-bottom	把元素的底端與父元素內容區域的底端對齊。
inherit	採用父元素相關屬性的相同的指定值。

---

 

關於做用環境

只有一個元素屬於inline或是inline-block（table-cell也能夠理解爲inline-block水平）水平，其身上的vertical-align屬性纔會起做用。
所謂inline-block水平的元素，便可以與inline水平元素混排，又能設置高寬屬性的元素，例如圖片，按鈕，單複選框，單行/多行文本框等HTML控件，只有這些元素默認狀況下會對vertical-align屬性起做用。
對inline元素設置vertical-align是有做用的，只是要從新設置line-height的值，不然繼承了父元素的line-height只能垂直居中。

---

 

 

2、當父元素沒有設置line-height時，inline/inline-block子元素之間對齊。

• 當父元素沒有設置line-height時，只對行內元素的兄弟元素對齊有用，沒法子元素居中對齊父元素。
• 設置了vertical-align:middle的子元素的中線與兄弟元素的基線對齊。若兄弟元素都設置該項，則居中對齊。

 

只設文字的vertical-align，則文字的中線對齊圖片底線

 

只設圖片的vertical-align，則圖片的中線與文字的基線對齊

 

 

兩個的vertical-align都爲middle，則兩個的中線互相對齊