WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「インライン要素の位置揃え」

vertical-align 「縦(垂直)方向の文字位置」

「vertical-align」は文字の縦(垂直)方向の位置を指定します。
インライン要素、テーブルセル要素に有効で、DIVなどのブロック要素にはそのままでは適用できません。

CSS Ver.適用要素継承
2.1 インライン要素
テーブルセル要素
する
広告

vertical-alignの指定方法

「vertical-align」はインライン要素とテーブルセル要素に有効です。ブロック要素に「vertical-align」を指定しても有効とはなりません。

対象となる要素(タグ)は次のリンク先の一覧で「display初期値」が「inline」「table-cell」となっています。
タグ毎のinline,table-cell一覧

DIVなどのブロック要素でも文字の縦位置を「vertical-align」で指定したい場合は下記のサンプルをご確認ください。

構文

vertical-align : baseline | top | middle | bottom | text-top | text-bottom | super | sub | % | 値;

プロパティ/設定値意味インライン
要素
テーブル
要素
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; 親要素の下付き文字 ×
vertical-align : 200%; 親要素のベースラインから
line-heightに対する割合で指定
正:上方向、負:下方向
×
vertical-align : 2em; 親要素のベースラインから
line-heightに対する値で指定
参照:CSSの長さ、大きさの単位
正:上方向、負:下方向
×
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

vertical-align のサンプル


<style type="text/css">
.sample1 td { line-height:normal; border:1px solid #666; }
.sample1 tr td:nth-of-type(1) { height:60px; font-size:60px; }
.s1 { font-size:36px; color:#333; background-color:#ddd;}
.s2 { font-size:12px; color:blue;}
.bl { vertical-align : baseline;    }
.tp { vertical-align : top;         }
.md { vertical-align : middle;      }
.bt { vertical-align : bottom;      }
.tt { vertical-align : text-top;    }
.tb { vertical-align : text-bottom; }
.sp { vertical-align : super;       }
.sb { vertical-align : sub;         }
.pr { vertical-align : 300%;        }
.vl { vertical-align : -1.5em;      }
</style>

<!-- html -->
<table class="sample1" style="width:100%;max-width:500px">
  <tr><th>インライン要素</th><th>テーブルセル</th></tr>
  <tr>
    <td>X<span class="s1">Y<span class="s2 bl">[baseline]</span></span></td>
    <td class="s2 bl">[baseline]</td>
  </tr>
  <tr>
    <td&gtX;<span class="s1">Y<span class="s2 tp">[top]</span></span></td>
    <td class="s2 tp">[top]</td>
  </tr>
  <tr>
    <td>X<span class="s1">Y<span class="s2 md">[middle]</span></span></td>
    <td class="s2 md">[middle]</td>
  </tr>
  <tr>
    <td>X<span class="s1">Y<span class="s2 bt">[bottom]</span></span></td>
    <td class="s2 bt">[bottom]</td>
  </tr>
  <tr>
    <td>X<span class="s1">Y<span class="s2 tt">[text-top]</span></span></td>
    <td class="s2 tt">[text-top]</td>
  </tr>
  <tr>
    <td>X<span class="s1">Y<span class="s2 tb">[text-bottom]</span></span></td>
    <td class="s2 tb">[text-bottom]</td>
  </tr>
  <tr>
    <td>X<span class="s1">Y<span class="s2 sp">[super]</span></span></td>
    <td class="s2 sp">[super]</td>
  </tr>
  <tr>
    <td>X<span class="s1">Y<span class="s2 sb">[sub]</span></span></td>
    <td class="s2 sb">[sub]</td>
  </tr>
  <tr>
    <td>X<span class="s1">Y<span class="s2 pr">[300%]</span></span></td>
    <td class="s2 pr">[300%]</td>
  </tr>
  <tr>
    <td>X<span class="s1">Y<span class="s2 vl">[-1.5em]</span></span></td>
    <td class="s2 vl">[-1.5em]</td>
  </tr>
</table>
インライン要素 テーブルセル
XY[baseline] [baseline]
XY[top] [top]
XY[middle] [middle]
XY[bottom] [bottom]
XY[text-top] [text-top]
XY[text-bottom] [text-bottom]
XY[super] [super]
XY[sub] [sub]
XY[300%] [300%]
XY[-1.5em] [-1.5em]

DIVなどのブロック要素で縦(垂直)位置を有効とする のサンプル

DIVなどのブロック要素で縦位置調整に「vertical-align」を使用する場合は「display: table-cell」とする必要があります。
ただし、DIVがセルと同じ動きとなるため、横並びとなりますので注意が必要です。


<style type="text/css">
.tp { vertical-align : top;    }
.md { vertical-align : middle; }
.bt { vertical-align : bottom; }
.tblcell{
   display    : table-cell;
   text-align : center;
   width      : 150px;
   height     : 100px;
   border     : 1px solid #666
}

<!-- html -->
<div id="sampleDiv1" class="tblcell tp">[top]<br>上詰め</div>
<div id="sampleDiv2" class="tblcell md">[middle]<br>中央</div>
<div id="sampleDiv3" class="tblcell bt">[bottom]<br>下詰め</div>
[top]
上詰め
[middle]
中央
[bottom]
下詰め

上記サンプルのDIVのDISPLAYを変更して確認することができます。

広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン