【CSS/html】table内のテキスト等を上下(縦)中央寄せする方法

「tableのテキストを上下(縦)中央寄せしたい！」

table内のテキスト等を上下(縦)中央寄せする方法を解説します。

【通常】何もしないと上下中央寄せ

table内のテキストは何も指定しない状態で既に上下中央寄せとなります。

セル	セル セル セル セル

<table border="1">
    <tr>
        <td>セル</td>
        <td>セル<br>セル<br>セル<br>セル</td>
    </tr>
</table>

【基本】tdにvertical-align:middle

table内のテキスト等を上下中央寄せするには、tdに「vertical-align:middle」を指定します。

セル	セル セル セル セル

<style>
.example td{
    vertical-align: middle;
}
</style>
<table class="example" border="1">
    <tr>
        <td>セル</td>
        <td>セル<br>セル<br>セル<br>セル</td>
    </tr>
</table>

vertical-alignは要素の縦位置の調整をするCSSです。tdに使うと子要素の位置を調整できます。

vertical-align:middleを指定すると中央寄せになります。「center」と間違えやすいので気を付けましょう。

先述したように通常何も指定しなくてもtable内のテキストは上下中央寄せになります。

それが上寄せ、下寄せになっているということはvertical-alignが指定されていることでしょう。

そのvertical-alignを消すか、上書きしましょう。上書きの際はCSSの優先順位に気を付けて指定しましょう。

【廃止】tdにvalign="middle"

tdにvalign="middle"を指定すると上下中央寄せになります。

ただしvalignはhtml5で廃止されているのでCSSを使いましょう。

セル	セル セル セル セル

<table border="1">
    <tr>
        <td valign="middle">セル</td>
        <td>セル<br>セル<br>セル<br>セル</td>
    </tr>
</table>

【要素の高さが異なるとき】要素自身にvertical-align:middle

td内にテキストとテキストエリアや画像などの高さが異なる要素が並んだとします。

すると下記のようにテキストエリアの下部にテキストが並びます。

テキスト

テキスト

<style>
.example2 td{
    vertical-align: middle;
}
</style>
<table border="1" class="example2">
    <tr>
        <td>テキスト</td>
        <td>テキスト<textarea></textarea></td>
    </tr>
</table>

このテキストをテキストエリアの上下中央に寄せたいとしましょう。

このとき、tdにvertical-align:middleを指定しても思ったように効きません。

この場合、tdの子要素にvertical-align:middleを指定しましょう。

テキスト

テキスト

<style>
.example3 td>*{
    vertical-align: middle;
}
</style>
<table border="1" class="example3">
    <tr>
        <td>テキスト</td>
        <td>テキスト<textarea></textarea></td>
    </tr>
</table>

vertical-alignはtdに指定すると子要素の位置調整をしますが、インライン要素およびinline-blockに指定するとその行内での自身の縦位置の調整をします。

「td>*」と指定するとtdの子要素すべてになります。

【まとめ】table内を上下中央寄せする方法

• tdにvertical-align:middle
• 【要素の高さが異なるとき】要素自身にvertical-align:middle

以上、table内のテキスト等を上下中央寄せする方法でした。