先來看規範文件中對於vertical-align屬性的定義及使用：

基線：就是英文小寫字母x的下邊緣。
常見的我們用於設定父元素內子元素（或子元素們）（為inline或inline-block）的對齊。

父元素為block，需設定line-height

如何實現子元素在父元素中居中（這裡嚴格為垂直居中）？

• 若元素是img、input等inline-block元素（或還含有inline元素）。要想居中對齊，父元素可設定line-height屬性，並且屬性值和width值相同。所有子元素設定vertical-align:middle即可
• 若元素只為span等的inline
  元素。要想居中對齊，則父元素必須設定line-height屬性，並且屬性值和width值相同，此時，元素居中對齊父元素。子元素設定vertical-align為其他值是起作用，不過，要重新設定子元素的line-height。
  若父元素不設定line-height，子元素之間對齊，且對齊具有最大高度的子元素

父元素為inline-block，必須設定line-height。

-設定父元素的width與line-height值相同