どうも7noteです。親は中央、子は左寄せにする方法について

ソース

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;を指定することで、中身の文章は左揃えになります。

たまに必要な場面があるので、やり方をわすれないようメモメモ。。。