意外と知られていないテキストを左揃えのまま中央寄せにするテクニック

こんにちは。

無事タイから帰国しました社員Aです👩！

社員旅行記については、また別で執筆予定ですのでお楽しみに！

さて、今回は意外と知られていないテキストを左揃えのまま中央寄せにするテクニックをご紹介します。

テキストを左揃えのまま中央寄せにする

コーディング時によくあるのが、テキストは左揃えのまま、コンテンツの中央に表示したい場合です。

テキスト自体も中央揃えなら、text-align:centerでまとめて中央揃えにしてしまえば良いのですが、この場合はそうはいきませんよね。

この「テキスト自体は左揃えのまま、中央に寄せる」ためのテクニックをご紹介します。

1.テキスト自体をdivで囲む

まずは、テキストの入っているpタグもしくはdivタグを、さらにdivタグで囲います。

下記のようなイメージです。

<div class="center_box">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

2.inline-blockを使ってセンタリングする

さきほど囲んだcenter_boxと、その中身であるpタグに対して下記のCSSを記述します。

.center_box {
text-align: center;
}
.center_box p {
display: inline-block;
text-align: left;
}

3.左揃えのままセンタリングできました！

上記の記述でテキストを左揃えにしたままセンタリングできました。

まとめ

この方法を知るまでは、左右にpaddingをかけて調整していたのですが、inline-blockを使うだけで一瞬でセンタリング出来るのでかなり重宝しています。

paddingで指定するのも良いのですが、レスポンシブデザインでは画面ごとにpaddingを調整する必要があり、その点に手間がかかっていました。

左揃えにしたままセンタリングしたいというときに是非活用してみてください！