vertical-alignプロパティ

最終更新日：2023-12-09
公開日：2016-07-26

要素内や行における、縦方向の表示位置を指定するプロパティです。

初期値
baseline
継承
不可
適用できる要素
インラインレベル要素、テーブルセル要素

vertical-alignプロパティに指定できる値

vertical-alignプロパティには次の値を指定することができます。

値	内容
`baseline`	初期値。親要素のベースラインに配置。
`top`	親要素のコンテンツ表示領域の最上部に配置
`middle`	垂直中央に配置
`bottom`	親要素のコンテンツ表示領域の最下部に配置
`sub`	下付き文字の位置に合わせて配置
`super`	上付き文字の位置に合わせて配置
`text-top`	親要素のコンテンツ表示領域の最上部に配置
`text-bottom`	親要素のコンテンツ表示領域の最下部に配置
`%`値	行の高さに対する割合で位置を指定します。
値 + 単位	任意の数値と単位（`px`、`pt`、`em`）で指定。ベースラインを基準に、上方向に配置するなら正の値、下方向に配置するなら負の値を指定します。

以降はvertical-alignプロパティを使ったコードと、ブラウザの使用例を紹介していきます。

使用例1: top、middle、bottomを指定

table要素の中で3つ並べたtd要素の対して、vertical-alignプロパティを指定していきます。
左から順に「top」、「middle」、「bottom」を指定しています。

CSS コード例

.sample1 td {
  padding: 20px;
  width: 15%;
  height: 100px;
  border: 1px solid #333;
}
.sample1 p {
  margin-bottom: 0;
  font-size: 18px;
}
.sample1 .text1 {
  vertical-align: top;
}
.sample1 .text2 {
  vertical-align: middle;
}
.sample1 .text3 {
  vertical-align: bottom;
}

HTML コード例

<table class="sample1">
  <tr>
    <td class="text1">topの適用例</td>
    <td class="text2">middleの適用例</td>
    <td class="text3">bottomの適用例</td>
  </tr>
</table>

ブラウザで表示してみると以下のようになります。

使用例2: 上付き、下付き指定

テキスト中の上付き文字sup要素に対してvertical-alignプロパティの「super」を指定し、下付き文字sub要素に対しては「sub」を指定します。

CSS コード例

.sample2 p {
  font-size: 18px;
}
.sample2 .text1 sup {
  vertical-align: super;
  font-size: 10px;
}
.sample2 .text2 sub {
  vertical-align: sub;
  font-size: 10px;
}

HTML コード例

<div class="sample2 first">
  <h2>vertical-align: super;</h2>
  <p class="text1">注釈のテキストなどで活用できます<sup>※2</sup></p>
</div>
<div class="sample2">
  <h2>vertical-align: sub;</h2>
  <p class="text2">注釈のテキストなどで活用できます<sub>※2</sub></p>
</div>

ブラウザで表示してみると以下のようになります。

使用例3: %で指定

vertical-alignプロパティに「数値 + %」で値を指定することで表示位置を調整する例です。

CSS コード例

.sample3 .text1,
.sample3 .text2,
.sample3 .text3 {
  font-size: 20px;
}
.sample3 .text1 span {
  vertical-align: 50%;
}
.sample3 .text2 span {
  vertical-align: -50%;
}
.sample3 .text3 span {
  vertical-align: 0%;
}

HTML コード例

<div class="sample3 first">
  <h2>vertical-align: 50%;</h2>
  <p class="text1">vertical-alignプロパティの<span>テスト</span></p>
</div>
<div class="sample3">
  <h2>vertical-align: -50%;</h2>
  <p class="text2">vertical-alignプロパティの<span>テスト</span></p>
</div>
<div class="sample3">
  <h2>vertical-align: 0%;</h2>
  <p class="text3">vertical-alignプロパティの<span>テスト</span></p>
</div>

ブラウザで表示してみると以下のようになります。

記事一覧