【文系大学生が分かりやすく解説!】縦軸でのテキスト中央配置の方法!

縦センタリングのサムネCSS
スポンサーリンク
縦センタリングのサムネ

今回のブログではCSSで文字を縦軸で中央配置するときに気をつけるべきことを解説していきます。
このところ模写サイトを作っている中でこのようなデザインの作成をしました。

一見よくできているように見えますが、テキストを増やしてみると下の画像のような不具合が起きます。

文字を増やした時の画像

1行目の文字が2列目の範囲にまで侵食してきてしまっています。理想としては2列目の範囲に侵食せずに下のように1列目の範囲にすべて収まってほしいですよね。

今回のブログではこのような悩みに対して、”なぜこの様になってしまうのか”や”解決策”を解説していきたいと思います。

今回の備忘録はこんな方におすすめ!

  • テキストの中央配置をしたい
  • テキストの上下の余白の設定の方法を知りたい!
  • line-heightプロパティの注意点を知りたい!
タピるマダラ蝶

この記事を読むと縦軸で中法配置するときの注意点を理解することが出来ます。

スポンサーリンク

テキストの縦センタリングの方法

テキストを縦軸でセンタリングするにはいくつかの方法があります。まずはその方法を理解しましょう!

line-heightを使う

縦方向のセンタリングをするときに、僕を含めプログラミング初心者の人は

margin-top:auto; 
margin-bottom: auto

を指定すれば縦センタリングできそう…なんて思ってしまいがちです。しかし、この方法では縦センタリングをすることが出来ません。そんなときに便利なのが、line-heightプロパティです。

line-heightプロパティを使って、行の高さ=ボックスの高さとすることで簡単にボックスの縦中央に文字を配置することができます。

See the Pen
line-heightの説明
by Rikuto Ui (@riku-1219)
on CodePen.

このように、行の高さ=ボックスの高さを指定します。つまり、この場合はボックスの高さが150pxなのでline-height: 150px;を指定しています。

position: absolute;を活用する

少しだけ複雑ですが、ほとんどのものを中央配置できる便利な方法を紹介します。それはpositionプロパティを活用する方法です。

親要素 {
 position:relative;
}
子要素(text) {
 position: absolute;
 top: 50%;
 -webkit-transform : translateY(-50%);
 transform : translateY(-50%);
}

実際に見ていきましょう!

See the Pen
line-heightの説明
by Rikuto Ui (@riku-1219)
on CodePen.

line-heightプロパティを使ったときと変わらずに縦センタリングが出来ています。

positionプロパティについてはこちらの記事でも解説しているので気になった方は見てくれると嬉しいです。

これらのセンタリング方法の問題点

今までに紹介したline-heightプロパティを使ったセンタリング方法とpositionプロパティにはそれぞれ問題点があります。ここでは各々の問題点について解説していきます。

line-heightはテキストが2行以上のときに使えない。

See the Pen line-heightの説明(複数行) by Rikuto Ui (@riku-1219) on CodePen.

2行目がボックスからはみ出てしまっているのが分かるかと思います。このようにテキストが複数行になるとボックスからはみ出してしまいます。この記事の冒頭の画像の不具合もこれが原因で起きています。

レスポンシブ対応時に不安定

次にpositionプロパティの問題点について解説していきます。positionプロパティの最大の問題点はレスポンシブ対応時に不安定だということです。

ポジションを使うと、場所ががちっと固定されてしまうため、レスポンシブデザインがやりにくくなります。そのため、PCでちゃんと見えてもスマホで快適に表示できなくなってしまうというデメリットが生じていまいます。

ここでpoint!

position指定はできるだけ使わないようにしよう!

テキストが複数行の時の縦センタリングの方法

ここまで記事を読んでいただいた方は「じゃあ、複数行の縦センタリングをするときはどうしたらいいの?」と疑問に思うかもしれません。その答えはpaddingを活用することです。

今日のpoint!

paddingの上下に (行の高さ – テキストのタグの高さ) ÷ 2 を指定する。

シンプルですがこれが1番安定します。実際に見て見ましょう。

See the Pen paddinngを活用した縦センタリング(複数行) by Rikuto Ui (@riku-1219) on CodePen.

line-heightプロパティやpositionプロパティを使ったときと変わらずに縦センタリングが出来ていますし、複数行になってもボックス内に収まっています。単純ですがとても効果的な方法だと思いました。

まとめ

今回は僕が模写していたときに生じた悩みをもとにテキストの縦センタリングの方法を解説していきました。縦センタリングは1行のときはline-height、複数行のときはpadding、それでも出来ないときはpositionを活用したらいいのでなないでしょうか?この記事が、CSSを学習している人たちの手助けになったらいいなと思います。

コメント

タイトルとURLをコピーしました