MENU
  1. ホーム
  2. CSS
  3. vertical-align

vertical-align

CSS
2023.09.26

vertical-alignプロパティは、
インラインボックス・インラインブロック・表セルボックスの垂直方向を指定します。

vertical-alignの説明図
インライン要素一例
  • <span>/<a>/<strong>/<label>
    ※ブロック要素内で使用してテキストやコンテンツをより細かく表現
vertical-alignプロパティ
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>vertical-align</title>
  </head>

  <body>
    <p>
      vertical-align:top<br>
      (指定要素を上端揃える)
    </p>
    <div class="out-line">
      <span class="out-line example">例</span>
      <span class="out-line parent-tex">
        テキスト
        <span class="top bg child-txt">text-top</span>
      </span>
    </div>

    <p>
      vertical-align:text-top<br>
      (テキストを上端揃える。テーブルセルでは無効)
    </p>
    <div class="out-line">
      <span class="out-line example">例</span>
      <span class="out-line parent-tex">
        テキスト
        <span class="text-top bg child-txt">text-top</span>
      </span>
    </div>

    <p>
      vertical-align:middle<br>
     （指定要素を中央揃える）
    </p>
    <div class="out-line">
      <span class="out-line example">例</span>
      <span class="out-line parent-tex">
        テキスト
        <span class="middle bg child-txt">middle</span>
      </span>
    </div>

    <p>
      vertical-align:baseline<br>
      (指定した要素のベースラインを親要素のベースラインと揃える)
    </p>
    <div class="out-line">
      <span class="out-line example">例</span>
      <span class="out-line parent-tex">
        テキスト
        <span class="baseline bg child-txt">baseline</span>
      </span>
    </div>

    <p>
      vertical-align:text-bottom<br>
      (テキストを下端揃える。テーブルセルでは無効)
    </p>
    <div class="out-line">
      <span class="out-line example">例</span>
      <span class="out-line parent-tex">
        テキスト
        <span class="text-bottom bg child-txt">text-bottom</span>
      </span>
    </div>

    <p>
      vertical-align:bottom<br>
      (指定要素を下端揃える)
    </p>
    <div class="out-line">
      <span class="out-line example">例</span>
      <span class="out-line parent-tex">
        テキスト
        <span class="bottom bg child-txt">bottom</span>
      </span>
    </div>

    <p>
      vertical-align:sub<br>
      (テキストを下付き文字に配置。テーブルセルでは無効)
    </p>
    <div class="out-line">
      <span class="out-line example">例</span>
      <span class="out-line parent-tex">
        テキスト
        <span class="sub bg child-txt">sub</span>
      </span>
    </div>

    <p>
      vertical-align:super<br>
      (テキストを上付き文字に配置。テーブルセルでは無効)
    </p>
    <div class="out-line">
      <span class="out-line example">例</span>
      <span class="out-line parent-tex">
        テキスト
        <span class="super bg child-txt">super</span>
      </span>
    </div>
  </body>
</html>
.example { font-size: 3em; }
.parent-tex { font-size: 2em; }
.child-txt { font-size: 0.3em; }
.out-line { border: 1px solid black; }
.bg { background-color: grey; color: white; }
.top { vertical-align: top; }
.text-top { vertical-align: text-top; }
.middle { vertical-align: middle; }
.baseline { vertical-align: baseline; }
.text-bottom { vertical-align: text-bottom; }
.bottom { vertical-align: bottom; }
.sub { vertical-align: sub; }
.super { vertical-align: super; }
出力結果

vertical-align:top
(指定要素を上端揃える)

例 テキスト text-top

vertical-align:text-top
(テキストを上端揃える。テーブルセルでは無効)

例 テキスト text-top

vertical-align:middle
（指定要素を中央揃える）

例 テキスト middle

vertical-align:baseline
(指定した要素のベースラインを親要素のベースラインと揃える)

例 テキスト baseline

vertical-align:text-bottom
(テキストを下端揃える。テーブルセルでは無効)

例 テキスト text-bottom

vertical-align:bottom
(指定要素を下端揃える)

例 テキスト bottom

vertical-align:sub
(テキストを下付き文字に配置。テーブルセルでは無効)

例 テキスト sub

vertical-align:super
(テキストを上付き文字に配置。テーブルセルでは無効)

例 テキスト super
vertical-alignプロパティ
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>vertical-align</title>
  </head>

  <body>
    <table>
      <thead>
        <tr>
          <th class="top">タイトル1</th>
          <th class="middle">タイトル2</th>
          <th class="bottom">タイトル3</th>
        </tr>
      <thead>      
      <tbody>
        <tr>
          <td class="bottom">項目1</td>
          <td class="middle">項目2</td>
          <td class="top">項目3</td>
        </tr>
        <tr class="middle">
          <td>項目4</td>
          <td>項目5</td>
          <td>項目6</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
table {
  border-collapse: collapse; // 枠線を１本にする
  border: 1px solid #000;
}
table th {
  border: 1px solid #000;
  width: 100px;
  height: 100px;
}
table td {
  border: 1px solid #000;
  height: 100px;
}
.top { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom;}
出力結果
タイトル1 タイトル2 タイトル3
項目1 項目2 項目3
項目4 項目5 項目6
CSS