ひっさびさに投稿するのだけど、基本メモなので最低限のテストしかしてません。
よく段落は左揃えだけど、全体としてはセンターに揃えたい、ということはありますよね?私だけ?
これまではラッパー要素で囲って、inline-block使ってたんですが、ちょっと違う方法思いつきました。
/* これまでこんな感じ */ <style> .wrapper { text-align: center; } .wrapper > p { display: inline-block; } </style> <div class="wrapper"> <p>ダミーテキストです。ダミーテキストです。ダミーテキストです。<br>ダミーテキストです。</p> </div>
/* 思いついたのは */ <style> .left-centered { display: flex; text-align: left; } .left-centered::before, .left-centered::after { content: ''; flex-grow: 1; } </style> <p class="left-centered">ダミーテキストです。ダミーテキストです。ダミーテキストです。<br>ダミーテキストです。</p>
HTML側がシンプルになり、要素を追加せずに修正対応もできるかな。