【CSS】文字を縦横中央揃えにしよう!めっちゃ簡単です

こんにちは!ラクです。

この記事では、プログラミング初心者の方がつまずくであろう「文字の中央揃え」について書いてきます!

最後まで読めばあなたも「中央揃えマスター」になれるかも⁉

では、早速いきましょう!

ざっくり解説:文字の中央揃え(1行)

text-align を使う

では、「text-align」を使って文字を左詰めから中央揃えにしてみましょう。

わかりやすくするためにdiv要素でサンプルを作ってみました!

<div>中央揃えにしたい!</div>

ここから、「text-align」を使って中央揃えにしてみます。

div{
  text-align: center;
}

すると、ちゃんと中央に寄りまし、、、いやまだ高さが中央揃えになってない⁉

そうなんです。「text-align」は左詰め(右詰め)か中央寄せしか指定できません

という訳で、次は高さも中央揃えにしていきます!

line-height を使う

次は、line-heightを使って高さを中央揃えにしていきます!

line-heightとは、ざっくり説明すると「1行の高さ」を変えるためのものです。

div {
  text-align: center;
  line-height: 150px; /* 親要素(今回の場合はdiv要素)の高さに揃える */
}

こうすると、、、

無事、高さも中央揃えになりました!

「line-height: 150px;」の理由は、ピンクの四角の縦が150pxだったからなので、ここの数値は場合によって使い分けてください。

ざっくり解説:文字の中央揃え(2行以上)

文が2行以上になってしまうと、、、

先程までは、文字が1行の場合の中央揃えを解説しましたが2行以上になってしまうとうまく中央揃えできません

試しに、文字を2行にしてみます。

<div>中央揃えにしたい!中央揃えにしたい!中央揃えにしたい!中央揃えにしたい!</div>
div {
  text-align: center;
  line-height: 150px;
  color: black; /* 分かりやすくするための文字色変更 */
}

こんな感じで、文字がはみ出してしまいました。

理由は、文1行の高さを150pxにしてしまっているため2行になるとトータルで300pxになってしまうからです。

こういうときはFlexbox

さっきの方法よりは少しめんどくさいですが、「Flexbox」というものを使います。Flexboxを説明すると長くなってしまうのでここでは割愛します。

説明用に以下のようなサンプルを作りました!

<div class="outer">
   <div class="inner">中央揃えにしたい!中央揃えにしたい!中央揃えにしたい!中央揃えにしたい!</div>
</div>
.inner {
    border: 2px dashed #444140; /* わかりやすいようにするための線 */
}

さっきのと違って、div要素を1つ増やして内と外に分けました。

ここから、Flexboxを使っていきます!

.outer {
  display: flex; /* 親要素をFlexboxにする */
  justify-content: center; /* 横を中央揃えにする */
  align-items: center; /* 縦を中央揃えにする */
}

これで、中央揃えにできました!

注意点としては、Flexboxは子要素(inner)ではなく親要素(outer)に適応させることです。

初心者の方はFlexboxを理解するのが難しいと思うので、とりあえず実際に使ってみるだけで良いと思います!

おまけ:もうちょっと見やすくしたいなら、、、

ちなみに、Flexboxを使うと少し見やすくできます。

具体的には、左右に空白を作くれます。

.inner {
  margin: 0 15px; /* 左右に15pxずつ空白を作る */
}

こんな感じで、なんかいい風にまとまってませんか?

これだけですw

最後に一言

最後まで読んでれてありがとう!

文字の中央揃えについて理解できましたか?

この記事があなたの役にたてば嬉しいですm(_ _)m

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です