Webデザイン

要素を垂直方向縦の中央真ん中に配置したいのにvertical-align: middleが効かない時の対応方法[CSS]

2020年9月17日

ウェブ制作において、要素を垂直方向縦の中央真ん中に配置したい事があります。

しかし、要素を真ん中に指定できるはずの「vertical-align: middle」を使用しても、効かない時があり、「あれ、前はいけてたのに、勘違いかな…」みたいな事が結構あったりします。

それには、しっかり理由がありますので、その点もふまえて実装方法と注意点の解説をしていきたいと思います。

「vertical-align: middle」を利用する

それでは、解説していきますね。

今、以下のような状況で「サンプルテキスト」という文字を、垂直方向縦の中央真ん中に配置したいとします。

<div style="width: 500px; height: 200px; border:1px solid;">サンプルテキスト</div>

実装例

サンプルテキスト

CSSで、中央に配置する代表(というか、わかりやすく勉強するプロパティ)といえば、「vertical-align: middle」ですね。

ですので、「vertical-align: middle」を以下で設定したいと思います。

<div style="width: 500px; height: 200px; border:1px solid; vertical-align: middle;">サンプルテキスト</div>

実装例

サンプルテキスト

うまく実装できませんでしたね。

「vertical-align: middle」とは?

それでは、そもそも「vertical-align: middle」とは何なのか、今一度確認しておきましょう。

「vertical-align: middle」とは、インライン要素、またはテーブル要素に対して、垂直方向縦の中央真ん中に要素を配置する事ができるプロパティです

ですので、DIVのようなブロック要素には効かない事になります

具体的なサンプルを元に話していきますね。

以下の場合、「サンプルテキスト」は「メインコピー」のベースラインの沿って配置されるのがわかります。

<div>メインコピー<span style="font-size: 3.0em;">サンプルテキスト</span></div>

実装例

メインコピーサンプルテキスト

しかし、spanはインライン要素ですので、「vertical-align: middle」が効きます。ですので、指定する事で要素を垂直方向縦の中央真ん中に配置する事ができます。

<div>メインコピー<span style="font-size: 3.0em; vertical-align: middle;">サンプルテキスト</span></div>

実装例

メインコピーサンプルテキスト

また「vertical-align: middle」はテーブル要素にも効きます。以下は、通常のテーブルになります。

<table>
<tr>
<td>メインテキスト</td>
<td>サンプル<br>テキスト</td>
</tr>
</table>

実装例

メインテキスト サンプル
テキスト

初期設定のテーブルのままなら、左のセル「メインテキスト」が上よりになっていますね。

これに「vertical-align: middle」をかけると垂直方向縦の中央真ん中に配置する事ができます。

<table>
<tr>
<td style="vertical-align: middle;">メインテキスト</td>
<td>サンプル<br>テキスト</td>
</tr>
</table>

実装例

メインテキスト サンプル
テキスト

ブロック要素に「vertical-align: middle」を効かせる

さて、前提の説明として脱線しましたが、今回の問題は、DIV(ブロック要素)の中の要素を垂直方向縦の中央真ん中に配置する事でした。

上記で説明していたように、DIVはブロック要素ですので「vertical-align: middle」は効きません

そんな時は以下の方法で対応する事ができますので、お好みに合わせてご利用ください。

「display: table-cell」を利用する

displayプロパティに「table-cell」という「値」を与える事で、<table>要素と同じ動作が可能になります。

ですので上記説明の通り、テーブル仕様にする事で「 vertical-align: middle」が利用できるようになるという発想です。

<div style="width: 500px; height: 200px; border:1px solid; display: table-cell; vertical-align: middle;">サンプルテキスト</div>

実装例

サンプルテキスト

「line-height」を利用する

line-heightプロパティを利用しても実装可能です。

line-heightは文字の高さを指定できるプロパティですが、以下のように高さ(height)が決まっている際は有効に使えます

実装方法は、line-heightをheightの値(高さ)と同じすればOKです。

そうする事で、文字の上下のスペースが確保され、真ん中に配置されているように見えるという発想です。

ちなみに、heightの値が指定されていなくても有効にはなります。

<div style="width: 500px; height: 200px; border:1px solid; line-height: 200px;">サンプルテキスト</div>

実装例

サンプルテキスト

「display: flex」を利用する

「display: flex」には色々な活用方法があり、一概にこれ!という使い方はないのですが、要素を中央に寄せたい時にも利用できます。

「display: flex」を利用する事で、フレックスボックス化する事ができ、そうする事で交差軸に合わせてアイテムを揃える事ができます。

交差軸の説明は少し難しいので今回は省略(覚えなくても大丈夫です)しますが、フレックスボックス化する事によって、「align-items」プロパティが利用できるようになり、要素を垂直方向縦の中央真ん中に配置する事が可能になります。

<div style="width: 500px; height: 200px; border:1px solid; display: flex;">サンプルテキスト</div>

ダメな実装例

サンプルテキスト

<div style="width: 500px; height: 200px; border:1px solid; display: flex; vertical-align: middle;">サンプルテキスト</div>

ダメな実装例

サンプルテキスト

<div style="width: 500px; height: 200px; border:1px solid; display: flex; align-items:center;">サンプルテキスト</div>

実装例

サンプルテキスト

ただし、「display: flex」を使用する事によって、「text-align」などで横方向の位置指定ができなくなります

<div style="width: 500px; height: 200px; border:1px solid; display: flex; align-items:center; text-align: center;">サンプルテキスト</div>

ダメな実装例

サンプルテキスト

ですので、「display: flex」を使用して、要素をど真ん中に配置したい場合は、align-itemsプロパティとは逆方向、すなわち水平方向の真ん中を指定する事ができる「justify-content」プロパティを利用すると良いでしょう。

<div style="width: 500px; height: 200px; border:1px solid; display: flex; align-items:center; justify-content:center;">サンプルテキスト</div>

実装例

サンプルテキスト

「display: flex」は大変便利なツールでもありますが、ゴリ押し配置の制御ができなく事もなりますので、しっかり理解した上で利用できるようになるのが良いと思います。

まとめ

いかがでしたでしょうか?

要素を垂直方向縦の中央真ん中に配置する事で大事な事は、その要素がブロック要素なのか、インライン要素なのか、テーブル要素なのかということをまず把握する事が大事です

インライン要素とテーブル要素の場合は、「vertical-align: middle」が効きますので、とっても簡単です。

しかし、ブロック要素の場合は、上記で説明したように少し手間がかかる事を覚えておき、焦らず対応していきましょう。

どの方法で実装するかは、その状況により変わってくると思いますので、その状況に応じて使い分けられるように、デザインの引き出しに入れておきましょう。

完全無料のクリエイター育成講座開催中!

人物イラストの無料ダウンロードサイト公開中!

人物イラストの無料ダウンロードならMIDO-KICHI

-Webデザイン

Copyright© デザイナーブリッジ , 2020 All Rights Reserved.