Webデザイナーブログから学ぶホームページ制作

「vertical-align」プロパティは、文字や画像の垂直方向（上下方向）の表示位置を指定するCSSプロパティです。
文字や画像の垂直方向の表示位置を指定する値は、「行の上端を揃える」「行の中心を揃える」「行の下端を揃える」などの指定ができます。

文字や画像の垂直方向（上下方向）の表示位置を指定する値は「baseline」「top」「middle」「bottom」「text-top」「text-bottom」などの値を指定することができます。
「vertical-align」プロパティは、インラインボックス、インラインブロック、表セルボックスの垂直方向（上下方向）の配置を設定します。
また、数値＋単位（px, %, pt, em）などで位置を指定もできます。
※「text-top」「text-bottom」などの値は、表のセルでは無効となります。

文字や画像の垂直方向（上下方向）の表示位置を指定する場合は、「vertical-align」プロパティを使い適応する値を指定することで実装できます。

セレクタ{
vertical-align:垂直方向（上下方向）の表示位置;
}

/* 基本値 */
vertical-align: baseline;/* 初期値 */
vertical-align: top;/* 上端を揃える */
vertical-align: middle;/* 中心を揃える */
vertical-align: bottom;/* 下端を揃える */
vertical-align: text-top;/* 指定要素の上端と、親要素のフォントの上端を揃える */
vertical-align: text-bottom;/* 指定要素の下端と、親要素のフォントの下端を揃える */
vertical-align: super;/* 上付き文字 */
vertical-align: sub;/* 下付き文字 */

/* px値 */
vertical-align: 12px;
vertical-align: 14px;

/* %値 */
vertical-align: 80%;
vertical-align: 90%;

/* pt値 */
vertical-align: 60pt;
vertical-align: 70pt;

/* em値 */
vertical-align: 1em;
vertical-align: 2em;