用vertical-align:middle。然而用的時候總是無效。所以決定看一看自己到底錯在了哪里。
作用環境：
父元素設置line-height。
作用對象：
子元素中的inline-block和inline元素。
一、父元素設置 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只能垂直居中。
二、當父元素沒有設置line-height時，inline/inline-block子元素之間對齊。
- 當父元素沒有設置line-height時，只對行內元素的兄弟元素對齊有用，無法子元素居中對齊父元素。
- 設置了vertical-align:middle的子元素的中線與兄弟元素的基線對齊。若兄弟元素都設置該項，則居中對齊。
只設文字的vertical-align，則文字的中線對齊圖片底線
只設圖片的vertical-align，則圖片的中線與文字的基線對齊
兩個的vertical-align都為middle，則兩個的中線互相對齊
