どうも7noteです。親は中央、子は左寄せにする方法について
見本
ソース
index.html
<divclass="oya"><divclass="ko">こんちわ<br>こんばんわ<br>さようなら、また明日
</div></div>
style.css
.oya{text-align:center;}.ko{border:1pxsolid#000;/* 見やすいように線を入れただけ */display:inline-block;text-align:left;}
解説
親(oya)要素にtext-align: center;
を入れることで、子(ko)要素を中央寄せにします。
このとき、子要素がblock要素のままだと、可変にもできないし、中央寄せにもならないのでdisplay: inline-block;
を指定します。
あとは子要素にtext-align: left;
を指定することで、中身の文章は左揃えになります。
まとめ
たまに必要な場面があるので、やり方をわすれないようメモメモ。。。
おそまつ
(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)