はじめに
text-alignは「ブロック要素または表のセルボックス内におけるインラインレベルコンテンツの水平方向の配置を設定」するプロパティである。
https://developer.mozilla.org/ja/docs/Web/CSS/text-align
See the Pen text-alignを理解する by syo-tokeshi (@syo-tokeshi) on CodePen.
個人的反省点
mdnにちゃんと
ブロック要素または表のセルボックス内におけるインラインレベルコンテンツの水平方向の配置を設定
と書かれているので、表のセルボックス内ではないインライン要素やインラインブロックでは試す必要がなかった。
ネットの記事ググるのは良いが、正式な仕様はMDNを参照しないといけないので、きちんとMDNの言っている意味を理解して、それを根拠に実装する癖をつけなくてはいけない
学習動機
よく真ん中寄せにしたい時にtext-align: center;を脳死で試すことがあった。
個人開発をする上で、UIフレームワークにスタイリングを丸投げすることはできない事に気づき、自分で根拠を持ってcssを書きたいと思うようになった。