はじめに

text-alignは「ブロック要素または表のセルボックス内におけるインラインレベルコンテンツの水平方向の配置を設定」するプロパティである。
https://developer.mozilla.org/ja/docs/Web/CSS/text-align

個人的反省点

mdnにちゃんと

ブロック要素または表のセルボックス内におけるインラインレベルコンテンツの水平方向の配置を設定

と書かれているので、表のセルボックス内ではないインライン要素やインラインブロックでは試す必要がなかった。

ネットの記事ググるのは良いが、正式な仕様はMDNを参照しないといけないので、きちんとMDNの言っている意味を理解して、それを根拠に実装する癖をつけなくてはいけない

よく真ん中寄せにしたい時にtext-align: center;を脳死で試すことがあった。

個人開発をする上で、UIフレームワークにスタイリングを丸投げすることはできない事に気づき、自分で根拠を持ってcssを書きたいと思うようになった。