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

CSS

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

2018年10月08日 12:00 

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

こんにちは。

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

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



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

 

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

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

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

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

 

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

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

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

 

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

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

 

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

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

まとめ

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

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

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

 

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。日本語力が乏しく…社内のみんなからも指摘をされるので、ブログの執筆を通じて語彙力強化していきたいです✨ 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物がすきな皆さま、小動物トークしましょう!