vertical-align

ブロック要素内にあるインライン要素やセルに対して、垂直方向の配置を指定します。


ブラウザ

IE3 / IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ vertical-align : 値; }

▲PageTop

指定できる値

値 初期値 意味
baseline ○ ベースラインに配置します。
top インライン要素やセルの上部に配置されます。
middle インライン要素やセルの中央部に配置されます。
bottom インライン要素やセルの下部に配置されます。
text-top 親要素のフォントサイズの上端に配置されます。
text-bottom 親要素のフォントサイズの下端に配置されます。
super <sup>要素のような、上付き文字の配置になります。
sub <sub>要素のような、下付き文字の配置になります。
数値+単位 数値が正であれば上へ、負であれば下へ、指定された数値分移動します。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      .sample1 {
        vertical-align : baseline;
        background-color : #ffff66;
      }
      .sample2 {
        vertical-align : top;
        background-color : #ccff66;
      }
      .sample3 {
        vertical-align : middle;
        background-color : #99ff99;
      }
      .sample4 {
        vertical-align : bottom;
        background-color : #66ffcc;
      }
      .sample5 {
        vertical-align : text-top;
        background-color : #00ffff;
      }
      .sample6 {
        vertical-align : text-bottom;
        background-color : #ffccff;
      }
      .sample7 {
        vertical-align : super;
        background-color : #ffcccc;
      }
      .sample8 {
        vertical-align : sub;
        background-color : #ffcc99;
      }
      .sample9 {
        vertical-align : 5px;
        background-color : #ffcc66;
      }
      .sample {
        border : 1px solid #999999;
        text-align : center;
        width : 100%;
        height : 50px;
      }
    </style>
  </head>
  <body>
    ■<span>要素に適用<br>
    <span class="sample">
      <span class="sample1">【baseline】</span>
      <span class="sample2">【top】</span>
      <span class="sample3">【middle】</span>
      <span class="sample4">【bottom】</span>
      <span class="sample5">【text-top】</span>
      <span class="sample6">【text-bottom】</span>
      <span class="sample7">【super】</span>
      <span class="sample8">【sub】</span>
      <span class="sample9">【5px】</span>
    </span>
    <br><br>
    ■<table>要素に適用
    <table class="sample">
      <tr>
      <td class="sample1">【baseline】</td>
      <td class="sample2">【top】</td>
      <td class="sample3">【middle】</td>
      <td class="sample4">【bottom】</td>
      <td class="sample5">【text-top】</td>
      <td class="sample6">【text-bottom】</td>
      <td class="sample7">【super】</td>
      <td class="sample8">【sub】</td>
      <td class="sample9">【5px】</td>
      </tr>
    </table>
  </body>
</html>

表示結果

■<span>要素に適用
【baseline】 【top】 【middle】 【bottom】 【text-top】 【text-bottom】 【super】 【sub】 【5px】

■<table>要素に適用
【baseline】 【top】 【middle】 【bottom】 【text-top】 【text-bottom】 【super】 【sub】 【5px】

▲PageTop

関連項目

CSS

text-align

▲PageTop

▲