プログラミング

HTMLのコーディングで2行(複数行)を縦方向中央寄せにする方法

2行を縦方向中央寄せ

 

複数行を縦方向中央に寄せることができない人
複数行を縦方向中央に寄せることができない人

複数行を縦方向中央に寄せたいけどうまくいかない。
どうすればできるんだろう?
だれか教えてくれないかな?

と悩みに2019年からコーディングの勉強を始めた当サイト(実務未経験からWEBエンジニアへの道のり)のjonioがお答えします。

コーディングを始めたてだと色んな壁にぶつかって中々先に進むことができないですよね。

私もそうで1つの問題が起きると散々ググって先に進んで解決してまた問題が起きて解決しての繰り返しでした。

その中で1行を親要素の中の縦方向の真ん中に寄せるのは簡単できましたが2行以上になるとできませんでした。

そして解決できたのですが同じ状況になる人が絶対にいるのでこの記事を作りました。

今から説明するやり方だと複数行になってもできます

それでは説明します。

↓状態で縦方向の中央寄せにしたい時がありますよね。

2行を縦方向中央寄せ

縦方向中央寄せにしたい時は1行ならline-heightの値をheightの値にすればうまく行きますが2行の時は上手くいきません。

試しにやってみると↓になります。

2行を縦方向中央寄せ

この時のコードは↓です。

これを解決するやり方は色々ありますがフレックスボックスを使えば簡単に解決できます。

CSSをこう変えます。

するとこう表示されます。

2行を縦方向中央寄せ

簡単に解決できました、私が初めてこれになった時は散々考えてふと「そういえばフレックスボックスを使えば簡単にできるかも」と思ってやってみたら上手くいきました。

ちなみにこのやりかただと複数行になっても上手くいきます。

例えば4行の場合のコードはこうします。

そしたらこう表示されます。

two-lines3

コーディングを始めたばかりで悩んでいる人の助けに慣れたら嬉しいです。

説明を終わります。