vertical-alignプロパティとは？
- top ＝ 上端揃え
- middle ＝ 中央揃え
- bottom ＝ 下端揃え
- text-top ＝ テキスト上端揃え ※テーブルセルへの指定はできない
- text-bottom ＝ テキスト下端揃え ※テーブルセルへの指定はできない
- ※他にも指定方法がある
-
1、vertical-alignプロパティの適用は、インライン要素とテーブルセルのみ
2、テーブルセルに適用した場合には、セル内の縦方向の位置を指定しますが、vertical-alignプロパティの値の中にはテーブルセルに指定しても無効な値もある
3、インライン要素に適用した場合には、行ボックスの高さの範囲内での縦方向の位置を指定
4、中央（middle）とは、フォントの場合は「0.5ex」、つまり「小文字xの中心の高さ」のこと
画像の場合は画像の中心の高さとなる
5、初期値は「baseline」だが、画像などはベースラインを持たないため、その下端が親要素のベースラインに揃えられる
6、ベースライン（baseline）・テキストの下端（text-bottom）・下端（bottom）は混同しがちだが、ベースラインはフォントの基準線、テキストの下端とはフォントの一番下のライン、下端とは行ボックスの一番下のライン
7、テキストの上端（text-top）・上端（top）は混同しがちだが、テキストの上端とはフォントの一番上のライン、上端とは行ボックスの一番上のライン
8、vertical-alignプロパティは、ブロックレベル要素には適用できない。
従って、vertical-alignプロパティでブロッ クボックス全体の縦方向の配置を制御することはできない
また、ブロックボックス内のテキストなどの縦方向の配置を制御することはできない
※参考させて頂いたURL
http://www.htmq.com/style/vertical-align.shtml