左寄せのまま中央寄せにしたいやつよくあるよね
だいたいは入れ子にして、外をcenterにして中をleftにすることが多いと思う
でもあれいろいろダサイんですよね htmlが複雑化してくるに従ってなんかいろいろ面倒なことになる、text-align が要素以下に全部影響したりとか 幅を指定したいときとか可変だったりとか 入れ子なのもださいし とにかくいろいろ面倒になる
そこでこう
<style>
p {
margin: 0 auto;
width: fit-content;
}
</style>
<p>案内文とか長ったらしくなったとき途中で改行したい、<br>
文中は左寄せしたいけど<br>
全体をセンターリングしたい</p>
なんかこの見慣れない fit-content とかいうやつは、widthをいいかんじにしてくれる。
ブロックレベル要素はデフォでwidth:100%なので色々困ってしまうわけだけど、この見慣れない fit-content とかいうやつがいいかんじにしてくれるので、伝家の宝刀 margin:0 auto; が使えるようになる。
かくしてネストなしで左寄せの中央寄せを実現できた！ やったね！
ところでこの fit-content とかいう見慣れないやつ、引数を与えることで、なんかいろいろなものをいいかんじにしてくれるらしい。くわしくは適当にぐぐって↓のような記事をよんでくれ