文字を左寄せにしたままで、ブロック単位で中央寄せにする方法

何気に使用頻度の高いCSSテクニック。文字を左寄せにしたままで、ブロック単位で中央寄せにする方法を紹介しよう。

完成形イメージ

言っていることの意味が不明だという方のために完成図の画像を見せる。

このように左揃えのままセンタリングすべきケースはしばしば発生する。マークアップ方法はそんなに難しくはないので覚えておこう。

実装方法

HTMLは下記のように記述する。ふたつのdivで囲むのがポイント！

<div class="centering-block">
 <div class="centering-block-inner">
  <p>文章をここに記述します。文章をここに記述します。文章をここに記述します。<br>
  文章をここに記述します。文章をここに記述します。文章をここに記述します。文章をここに記述します。<br>
  文章をここに記述します。文章をここに記述します。</p>
 </div>
</div>

続いて肝心のCSS。以下のように記述しよう。

.centering-block {
 text-align: center;
}
.centering-block .centering-block-inner {
 text-align: left;
 display: inline-block;
}

親要素divには「text-align:center;」を指定する。
子要素divを「inline-bloc」化しつつalignを左寄せに戻している。

基礎さえ押さえている方からしたら、さして難しい事はしていないのがおわかりいただけるはずだ。