どうも7noteです。親は中央、子は左寄せにする方法について
見本
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Fd10671e3-28f5-6800-0d53-5222fd6d8723.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6afd8c285356c04dcad45bef8165e53b)
ソース
index.html
<div class="oya">
<div class="ko">
こんちわ<br>
こんばんわ<br>
さようなら、また明日
</div>
</div>
style.css
.oya {
text-align: center;
}
.ko {
border: 1px solid #000; /* 見やすいように線を入れただけ */
display: inline-block;
text-align: left;
}
解説
親(oya)要素にtext-align: center;
を入れることで、子(ko)要素を中央寄せにします。
このとき、子要素がblock要素のままだと、可変にもできないし、中央寄せにもならないのでdisplay: inline-block;
を指定します。
あとは子要素にtext-align: left;
を指定することで、中身の文章は左揃えになります。
まとめ
たまに必要な場面があるので、やり方をわすれないようメモメモ。。。