inlineblock要素に直接textalignを指定する事について

現在ECサイトを模写しています。
aタグをボタンのような表示にするためにdisplay: inline-block;としました。
heightとwidthを指定し、中のテキストも中央揃えにしたかったため、line-heightをheightの数値に合わせ高さを中央揃えにしました。
横幅の範囲内でも中央揃えにするためinline-blockになったaタグに直接text-align: center;を指定したところ、中央揃えになりました。
後々「text-alignはブロック要素に指定するものでは？」と気付きました。
確認のためにtext-alignを消すと左揃えに戻ってしまうので、やはりこれが効いているのだと思います。
今回のコードではなぜインラインブロック要素に直接指定したのにもかかわらず、text-alignが効いたのでしょうか？
色々調べましたが、インラインブロック要素を中央揃えにする場合は親要素（ブロック要素）でインラインブロック要素を囲んで、その親要素にtext-alignを指定するという情報しか見つかりませんでした。
はじめからaタグをblock要素にすれば良かったのですが、選択の基準がわからずinline-blockにしていました。
なぜ今回は中央揃えになったのか理解ができず、理由を教えてもらえると助かります。
よろしくお願いいたします。

HTML
1<a class="btn" href="#">ADD TO CART</a>

CSS
1a {
2  text-decoration: none;
3  color: #333;
4  display: inline-block;
5}
6
7.btn {
8  background-color: rgb(85, 84, 84);
9  width: 100%;
10  height: 50px;
11  line-height: 50px;
12  text-align: center;
13  color: white;
14}

行動規範の内容に同意します

回答1件

ベストアンサー

text-alignはブロック要素に指定するものでは？

いいえ、そうではないです。

適用対象ブロックコンテナー

text-align - CSS: カスケーディングスタイルシート | MDN

なお、ブロックコンテナとは何か、については私もしっかり理解していないですが、インラインブロックはブロックコンテナで間違いないです。

ブロックコンテナー | 視覚整形モデル - CSS: カスケーディングスタイルシート | MDN

投稿2021/11/08 02:16

Lhankor_Mhy

総合スコア36960

pckuma

2021/11/08 13:02

ご回答ありがとうございます。もう少し質問させていただけますでしょうか？現在の私の認識としましては、「text-alignはブロック要素に設定（適用させる）すると、その中のインライン要素（インラインブロックやテキスト）を整列（水平位置を変更）させる事が可能」という認識でいますが、いかがでしょうか・・？もし上記の認識が正しい場合、＞なお、ブロックコンテナとは何か、については私もしっかり理解していないですが、インラインブロックはブロックコンテナで間違いないです。という事は、ブロックコンテナであるインラインブロック要素にtext-alignを指定しているので、中のテキストが中央揃えになるのは妥当という風に捉えることができたのですが、正しいのでしょうか？