cssとhtml一つで文章を左揃えのまま中央寄せする方法

cssとhtml一つで文章を左揃えしつつ
文章の長さに合わせて自動的に中央寄せすることができます。
一般的にページの幅をいっぱい使った左揃えの文章になりますが、
横幅を指定することなく、
左揃えの文章を全体を中央寄せすることができます。

　
　
というふうに全体を中央寄せし、文章を短めにすると印象が変わります。
これに画像を組み合わせると、インパクトのあるページになるので
この表示の仕方にこだわっていたことがあります。
（ちなみに、パソコンから閲覧したほうが、わかりやすいです。）
　
よくあるパターンとしてcssの組み方は、inline-block

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

　
htmlは

<div class="box">
 <p class="text">
   cssとhtml一つで<br>
   文章を左揃えのまま中央寄せする方法<br>
   横幅は指定していません。
 </p>
</div>

という記述方法です。
　
実際に表示させてみると、

cssとhtml一つで

文章を左揃えのまま中央寄せする方法

横幅は指定していません。

　
cssとhtmlを2ずつ組み合わせて左揃えのまま中央寄せしています。
少し複雑になってしまいますね。

やっていることは外側にある親要素を中央寄せして、
内側にある子要素を左揃えをしているということ。
複雑にはなりますが、親要素に横幅を指定することで
細かなカスタマイズができます。
　
　
これをシンプルな方法で表示させるには
まずはこちら、flex。
css

.flex-center{
   display:flex;
   justify-content: center;
}

　
html

<div class="flex-center">
  cssとhtml一つずつで<br>
  左揃えしながら中央寄せ。
</div>

　
こういう表示になります。

cssとhtml一つずつで

左揃えしながら中央寄せ。

　
display:flex;を親要素にして入れ子として
子要素に文章をいれて使うことが多いようですが、
子要素なしでも中央寄せができます。
　
ただし、古いブラウザには対応していないので、
その場合はcssとhtmlを2つ使った最初の方法か
次の方法を使うことになります。
　
　
その方法は、table。
css

.table-center{
  display: table;
  margin: 0 auto;
}

　
html

<div class="table-center">
  シンプルな方法で<br>
  左揃えしつつ全体は中央寄せ。
</div>

　
こちらもこのような表示になります。

シンプルな方法で

左揃えしつつ全体は中央寄せ。

　
文章の長さに合わせて自動的に左右に余白を作り、
中央寄せしてくれます。
　
左揃えのまま中央寄せさせるには、このようにいくつか方法があり、
cssとhtml一つずつでシンプルに表示させることができます。
　
文章の長さによって中央寄せさせることで
ページとしての印象が代わり、意外に使えるので、
これらのコードを必要に応じて使い分けましょう。
　
スポンサードリンク