テキスト・フォント

「vertical-align」プロパティ

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

「vertical-align」プロパティの値

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

「vertical-align」プロパティの指定方法

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

「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;
表示例
垂直方向(上下方向)の表示位置(上端を揃える)
垂直方向(上下方向)の表示位置(中心を揃える)
垂直方向(上下方向)の表示位置(下端を揃える)