http://www.htmq.com/style/vertical-align.shtml
vertical-alignは適用する対象によって３種類の意味を持つ。
vertical-alignをblock要素に使う場合は、何の効果も無い。bottomを指定しても別に要素がブロック内の下部に配置されるわけではない。
vertical-alignをtable-cell要素に使う場合は、セルの子要素がどの高さに配置されるかを決めるスタイルになる。これは単純明快である。
vertical-alignをinline要素に使うと『行の中で、自身をどの高さに配置するか』を決めるスタイルになる。このパターンは複雑だが、URL先の「ブラウザ上の表示」を見るのが一番良く解る。
また、IE11のレンダリングエンジンは要素の位置を小数点以下の値まで扱うため、『div内にインライン要素A、B、Cがあったとき、Cのvertical-alignを指定してCの位置を小数点以下で調整したら、それを表現するために要素Cの位置は変わらずに要素A、Bの位置がずれる』
という表示になることがあるので注意！！！
baseline 適用した要素のベースラインを親要素のベースラインに揃える（初期値）
("a"の一番下部分の高さがbaseline。"p"や"q"の棒の部分などはベースラインより下に表示される。
後述のtext-bottomは"p"や"q"の棒の部分も含めた一番下の高さを指す。)
top 「行全体の高さに対して」上端揃え
middle 「行全体の高さに対して」中央揃え
bottom 「行全体の高さに対して」下端揃え
text-top 「親要素のテキストの高さに対して」上端揃え（テーブルセルへの指定は無効）
text-bottom 「親要素のテキストの高さに対して」下端揃え（テーブルセルへの指定は無効）
super 「親要素のテキストの高さに対して」上付き文字（テーブルセルへの指定は無効）
sub 「親要素のテキストの高さに対して」下付き文字（テーブルセルへの指定は無効）
