ホーム(記事一覧)へ

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

vertical-align:middle

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

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

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

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

vertical-alignが効かない原因:
tdじゃないから

結論から言うとvertical-align:middleが効かない原因はtdじゃないからです。

vertical-align:middleはtable内のマスであるtd内の文字の縦位置を指定するCSSです。普通のブロックでは効きません。

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

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

失敗例

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

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

このdivに「display: table-cell」を指定しましょう。

成功例

vertical-align:middle
.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%」を指定しましょう。

上下中央寄せ代替案

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

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

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

1.display:flex

上下中央寄せするときは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がオススメです。

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ですが、上下を自動で設定してくれる特徴を生かして上下中央寄せにしたいときにも使えます。

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

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

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

補足:vertical-alignはインライン要素に指定できる

特定の枠に対してvertical-align:middleを指定するならdisplay:table-cellを指定する必要がありますが、高さの違うインライン要素を上下中央にそろえるだけならそのインライン要素に直接指定すればOKです。

vertical-alignを指定しない場合

富士山
<style>
.example8{
    border: 1px solid #333;
    background: #f2f2f2;
}
</style>
<div class="example8"><img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="" width="40">富士山</div>

vertical-alignを指定した場合

富士山
<style>
.example9{
    border: 1px solid #333;
    background: #f2f2f2;
}
.example9 img{
    /*コレ*/vertical-align: middle;
}
</style>
<div class="example9"><img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="" width="40">富士山</div>

画像を文字のちょうど真ん中に寄せたいときはこのように調整することができます。

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

vertical-alignが効かない原因:tdじゃないから

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

上下中央寄せ代替案

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

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

関連記事