text-alignの適用範囲

Question

ネスと構造を作成し、親要素にtext-align: center;を適用すると、子要素のテキストは中央に寄ります。一方で、親要素のさらにもう一つ上の要素にtext-align: center;を適用したにも関わらず、テキストが中央によるのはなぜでしょうか？

HTML

<div class="container">
　<div class="point">
    <img src="#">
    <p>this is a point1</p>
  </div>
　<div class="point">
    <img src="#">
    <p>this is a point2</p>
  </div>
　<div class="point">
    <img src="#">
    <p>this is a point3</p>
  </div>
　<div class="point">
    <img src="#">
    <p>this is a point4</p>
  </div>
</div>
              

CSS

.container {
    width: 900px;
    margin: 0px auto;
    text-align: center;
}

img {
    width: 30px;
    height: 70px;
    margin: 0px 0px;
    padding: 0px 0px;
    display: block;
    margin: 0 auto;
    
}

.point {
    float: left;
    width: 25%
}

また、このtext-alignをcontainerの親タグに適用すると、テキストの中央寄せは起こりません。text-alignにはそれが効果を発揮するスコープがあるように思えます。仕組みを教えて頂きたいです。

Answer 1

text-alignは継承されるので、親要素にtext-align: center;とすれば、子要素にtext-alignの指定がない場合、text-align: center;として扱われます。

text-alignをcontainerの親タグに適用すると、テキストの中央寄せは起こりません。

.containerにtext-align: center;が適用されている場合、それより外側の継承は無関係となります。

Comments

[kawahagi]

ありがとうございます。ただ、text-alignをcontainerの親タグに適用した時はcontainerのtext-alignは消去しております。どうして継承されないのでしょうか？思い当たり理由があれば教えて頂きたいです。

[maisumakun]

Bootstrapなど、何かしらのCSSを別途で入れていて、そちらが効いている、ということはないでしょうか？

[kawahagi]

すみません、自分のコーディングミスでしたああ！しっかりと適用されました。たくさんありがとうございます！