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

CSS

2018年10月08日 12:00　

こんにちは。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺