block要素にtext-align:centerは効くのか効かないのか

Question

 <div class="container-feature">
     <img src="img/pickup.jpg" class="">
      <p class="txt">ヨガ、ピラティス、</p>
    </div>

 .container-feature {
  text-align: center
}

 .container-feature img {
  display: block;
}

同じblock要素にしているのにtext-align:centerがpタグには効いてもimgタグには効かないのはどういう理由なのでしょうか。

Answer 1

同じblock要素にしているのにtext-align:centerがpタグには効いてもimgタグには効かないのはどういう理由なのでしょうか。

text-alignは継承されますので（MDN）、<p>自体についてもtext-align: centerとして扱われます。「ブロック要素に適用されている」わけではないです。

Answer 2

.container-feature img {  
display: block;  
}  

としているから、インラインコンテンツではなくなっているからでは。

center
インラインコンテンツは行ボックス内で中央寄せされます。
text-align - CSS: カスケーディングスタイルシート | MDN

追記

失礼、質問を読み落としていました。
p要素のテキストがセンタリングするのは、継承しているからです。

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

　

要素の継承プロパティに値が指定されなかった場合、要素はその親要素のプロパティの計算値を取得します。
inheritance - CSS: カスケーディングスタイルシート | MDN

Comments

[Lhankor_Mhy]

ああ、そういうことか。
追記します。

[退会済みユーザー]

なぜimg要素には継承されないのでしょうか。

[Lhankor_Mhy]

調べてみましたが、継承されているようですよ。

ただ、継承されていても、インラインコンテンツを持っていないのでセンタリングする文字列がないですね。

[退会済みユーザー]

インラインコンテンツを持っていないのでセンタリングする文字列がない というのはどういうことでしょうか。img要素は文字ではないから真ん中に来ないということですか。

[Lhankor_Mhy]

p要素の中には文字がありますが、
img要素の中には文字はないですよね？