CSS vertical-align:middleが効かない原因と代替案

上下中央寄せと言えば「vertical-align:middle」です。

「vertical-align:middleを指定したのに上下中央寄せにならない！」というときの原因と解決方法を説明します。

また、上下中央寄せする方法は複数あるので「vertical-align:middle」以外の上下中央寄せ方法についても解説します。

私はホームページを作って9年になります。いろいろな方法で上下中央寄せをしてきましたのでご覧ください。

【原因1】tdじゃないから

tdにvertical-align:middleを指定すると子要素を上下中央寄せしますが、divやpなどtd以外に指定しても上下中央寄せになりません。

下記例ではdivにvertical-align:middleを指定していますが、上下中央寄せになっていません。

失敗例

<style>
.example{
    /*コレ*/vertical-align:middle;
    border: 1px solid #333;
    height: 100px;
    background: #f2f2f2;
}
</style>
<div class="example">vertical-align:middle</div>

解決方法：display:table-cellを指定する

display:table-cellを指定することでtdと同じものにすることができます。

成功例

.example2{
    /*コレ*/vertical-align:middle;
    /*コレ*/display: table-cell;
    border: 1px solid #333;
    height: 100px;
    background: #f2f2f2;
}
</style>
<div class="example2">vertical-align:middle</div>

このように上下中央寄せができました。

display: table-cellはtdと同じ特徴を持ちますので横幅は最低限になります。横幅いっぱいにしたいときは「width:100%」を指定しましょう。

【原因2】要素の高さが異なるから

下記はtdに「vertical-align:middle」を指定していのに右側のテキストが下寄せになっています。

インライン要素またはinline-blockが横に並びかつ高さが違うとき、その高いほうに合わせて下揃えになります。

失敗例

テキスト

テキスト

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

解決方法：要素自身にvertical-align:middleを指定する

横並びしている要素自身にvertical-align:middleを指定しましょう。

成功例

テキスト

テキスト

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

上下中央寄せ代替案

先ほど「display: table-cell」を指定することで「vertical-align:middle」を指定する方法を説明しました。

しかし「td」は本来「table」タグ内になければならないように「display: table-cell」も「display: table」内にないと不自然です。

とりあえず解決すればいい場合は上記でもいいですが、レベルアップして、他の上下中央寄せも覚えていきましょう。

1.display:flex

上下中央寄せするときはdisplay:flexを使うのがオススメです。

<style>
.example3{
    /*コレ*/display:flex;
    /*コレ*/align-items: center;
    border: 1px solid #333;
    height: 100px;
    background: #f2f2f2;
}
</style>
<div class="example3">display:flex</div>

display:flexは横並びのときによく使うCSSですが、レイアウトの調整が強みであり、上下中央寄せするときにも重宝します。

「display:flex」だけでは上下中央寄せになりません。

「align-items:center」もセットで指定しましょう。

↓display:flexって何？という方はこちら

↓display:flexがうまくいかない方はこちら

2.position:absolute

基本的にはdisplay:flexがオススメですが、position:absoluteを使っている場合の上下中央寄せの方法です。

topで指定

topの指定だけで上下中央寄せにできます。

<style>
.example4{
    border: 1px solid #333;
    height: 100px;
    background: #f2f2f2;
    position: relative;
}
.example4::before{
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2833b5;
    position: absolute;
    /*コレ*/top: calc(50% - 10px);
    left: 10px;
}
</style>
<div class="example4"></div>

「top:50%」だと●の位置が少し下になります。これは基準が●の左上だからです。●の高さの半分だけ上にもっていくとちょうど上下中央寄せになります。

今回高さを20pxに指定しているので10px引けばいいわけです。

「top: calc(50% - 10px)」と指定するとちょうど真ん中になります。

↓calcって何？という方はこちら

topとbottomで指定

結果は同じですがちょっと違う指定方法もできます。

<style>
.example5{
    border: 1px solid #333;
    height: 100px;
    background: #f2f2f2;
    position: relative;
}
.example5::before{
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2833b5;
    position: absolute;
    /*コレ*/top: 0;
    /*コレ*/bottom: 0;
    /*コレ*/margin: auto;
    left: 10px;
}
</style>
<div class="example5"></div>

top: 0;
bottom: 0;
margin: auto;

この3つをセットで指定すると上下中央寄せになります。

この場合高さに関わらないというメリットもあります。

どちらも結果は同じなので好きな方を利用してください。

3.padding

高さの指定がなく、上下に一定の余白を指定したいときはpaddingがオススメです。

<style>
.example6{
    /*コレ*/padding:20px 0;
    border: 1px solid #333;
    background: #f2f2f2;
}
</style>
<div class="example6">padding<br>padding</div>

paddingの場合何行になっても一定の余白を確保できるのが特徴です。

4.line-height

絶対1行という要素ならline-heightでも上下中央寄せになります。

line-heightは行間を指定するCSSですが、上下を自動で設定してくれる特徴を生かして上下中央寄せにしたいときにも使えます。

<style>
.example7{
    line-height: 3;
    border: 1px solid #333;
    background: #f2f2f2;
}
</style>
<div class="example7">line-height</div>

line-heightはpx指定もできますが、単位なしの数字を入れるとem、つまり、文字サイズに応じた高さになります。

また高さも自動で決まるためheightの指定は不要です。

【まとめ】CSS vertical-alignが効かない原因と代替案

【原因1】tdじゃないから

解決方法：display:table-cellを指定する

上下中央寄せ代替案

1. オススメはdisplay:flex
2. position:absoluteならtopで調整
3. paddingで上下に同じ幅の余白を
4. 1行ならline-height

【原因2】要素の高さが異なるから

解決方法：要素自身にvertical-align:middleを指定する

以上、CSS vertical-align:middleが効かない原因と代替案でした。