【CSS】vertical-align - インライン要素・表セルの垂直方向位置

CSSのvertical-alignプロパティについて解説します。

検証環境

CSS

macOS

14.1

vertical-align

vertical-alignは“インライン要素や表セルの垂直方向位置”のプロパティです。

基本構文

vertical-align: 値;

値

代表的な値は次の通りです。

値	説明
baseline	親要素テキストのベースライン
sub	親要素テキストの下付き文字
super	親要素テキストの上付き文字
text-top	親要素テキストの上端
text-bottom	親要素テキストの下端
middle	親要素の中央（baseline + x-height / 2）
top	行の上端
bottom	行の下端
数値	要素のベースラインを親要素のベースラインに数値分上に揃えます。

表セルはbaseline、top、middle、bottomを適用できます。

サンプル

インライン要素

sample.html

<style>
p {
    color: darkgray;
    background: whitesmoke;
}
.line {
    font-size: 2.5rem;
}
.normal {
    text-decoration: underline overline;
}
.test {
    color: black;
    text-decoration: underline overline;
}
___ih_hl_start
.baseline    { vertical-align: baseline; }
.sub         { vertical-align: sub; }
.super       { vertical-align: super; }
.text-top    { vertical-align: text-top; }
.text-bottom { vertical-align: text-bottom; }
.middle      { vertical-align: middle; }
.top         { vertical-align: top; }
.bottom      { vertical-align: bottom; }
.num      { vertical-align: 16px; }
.per      { vertical-align: -50%; }
___ih_hl_end
</style>
    
<p>
    <span class="line">LINE</span>
    <span class="normal">TEXT</span>
    <span class="test baseline">baseline</span>
</p>
<p>
    <span class="line">LINE</span>
    <span class="normal">TEXT</span>
    <span class="test sub">sub</span>
</p>
<p>
    <span class="line">LINE</span>
    <span class="normal">TEXT</span>
    <span class="test super">super</span>
</p>
<p>
    <span class="line">LINE</span>
    <span class="normal">TEXT</span>
    <span class="test text-top">text-top</span>
</p>
<p>
    <span class="line">LINE</span>
    <span class="normal">TEXT</span>
    <span class="test text-bottom">text-bottom</span>
</p>
<p>
    <span class="line">LINE</span>
    <span class="normal">TEXT</span>
    <span class="test middle">middle</span>
</p>
<p>
    <span class="line">LINE</span>
    <span class="normal">TEXT</span>
    <span class="test top">top</span>
</p>
<p>
    <span class="line">LINE</span>
    <span class="normal">TEXT</span>
    <span class="test bottom">bottom</span>
</p>
<p>
    <span class="line">LINE</span>
    <span class="normal">TEXT</span>
    <span class="test num">num</span>
</p>
<p>
    <span class="line">LINE</span>
    <span class="normal">TEXT</span>
    <span class="test per">per</span>
</p>

プレビュー

表セル

sample.html

<style>
td {
    background: lightgray;
}
___ih_hl_start
.baseline { vertical-align: baseline; }
.top      { vertical-align: top; }
.middle   { vertical-align: middle; }
.bottom   { vertical-align: bottom; }
___ih_hl_end
</style>

<table>
    <tbody>
        <tr>
            <td class="baseline">baseline</td>
            <td class="top">top</td>
            <td class="middle">middle</td>
            <td class="bottom">bottom</td>
            <td>CSS : Cascading Style Sheets. CSS is a programming language that decorates elements such as HTML and XML. You can set various properties such as text color, background, and size.</td>
        </tr>
    </tbody>
</table>

プレビュー