エスエムティの愉快な仲間たち

こんばんはばさっちです。
今日コーディングしていてふと思ったことなんですが、
テキストを左揃えしたまま、中央寄せってどうやってますか？

■その時のイメージは下記の通り


いろいろ調べてみると下記のように記述がちらほら…

————————————————-
#Box {
width: 100%;
text-align: center;
}
#Box #Box01Inner {
display: inline-block;
}
#Box #Box01Inner p {
text-align: left;
}
————————————————-

結果からいうと特に問題なくうまくいきましたが、せっかくなのでFlexboxを使ってみようと思い、Flexboxで記述する場合は下記の通り。

————————————————-
#Box {
width: 100%;
display: flex;
justify-content: center;
}
#Box p {
text-align: left;
}
————————————————-

こっちの方が記述が少なくわかりやすいと思うので、こっちを採用しました。
ただこの記述方法だとie9には反映しないのでちょっと変更を加えます。

————————————————-
#Box {
width: 100%;
-js-display: flex;
display: flex;
justify-content: center;
}

#Box p {
text-align: left;
}
————————————————-
flexibility.jsを追加してこの書き方をすればie9にも対応します。

落ち着いて考えればどうってことないのですが、よく使いそうであまり使わないテクニックだけにちょっと考えてしまいました。

今日また一つ勉強になりました！