facebooktweetはてブLINEPocketfeedlyこんにちは。無事タイから帰国しました社員Aです👩!社員旅行記については、また別で執筆予定ですのでお楽しみに!さて、今回は意外と知られていないテキストを左揃えのまま中央寄せにするテクニックをご紹介します。くじテキストを左揃えのまま中央寄せにする1.テキスト自体をdivで囲む2.inline-blockを使ってセンタリングする3.左揃えのままセンタリングできました!まとめテキストを左揃えのまま中央寄せにするコーディング時によくあるのが、テキストは左揃えのまま、コンテンツの中央に表示したい場合です。テキスト自体も中央揃えなら、text-align:centerでまとめて中央揃えにしてしまえば良いのですが、この場合はそうはいきませんよね。この「テキスト自体は左揃えのまま、中央に寄せる」ためのテクニックをご紹介します。1.テキスト自体をdivで囲むまずは、テキストの入っているpタグもしくはdivタグを、さらにdivタグで囲います。下記のようなイメージです。class="center_box"><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>2.inline-blockを使ってセンタリングするさきほど囲んだcenter_boxと、その中身であるpタグに対して下記のCSSを記述します。left;}3.左揃えのままセンタリングできました!上記の記述でテキストを左揃えにしたままセンタリングできました。まとめこの方法を知るまでは、左右にpaddingをかけて調整していたのですが、inline-blockを使うだけで一瞬でセンタリング出来るのでかなり重宝しています。paddingで指定するのも良いのですが、レスポンシブデザインでは画面ごとにpaddingを調整する必要があり、その点に手間がかかっていました。フロントエンドエンジニア・デザイナーの社員Aです。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。人気記事Posting....。