テキストアライメントのブラウザプレフィックスの動作が異なり、正しいのはなぜですか？

Question

<div>のタグは、水平方向にマージンを持つタグを垂直方向に配置したいと考えています。

.parent { 
 
    display: inline-block; 
 
    border: 1px dotted #fd0; 
 
    position: relative; 
 
} 
 
.parent.ta { 
 
    text-align: center; 
 
} 
 
.parent.browser-ta { 
 
    text-align: -webkit-center; 
 
    text-align: -moz-center; 
 
} 
 
.child { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.child > .content { 
 
    display: block; 
 
    margin: 0 10px; 
 
    border: 1px solid #888; 
 
    width: 200px; 
 
    text-align: left; 
 
} 
 
.wrong { 
 
    background-color: #e00; 
 
    color: #fff; 
 
} 
 
.right { 
 
    background-color: #0a3; 
 
    color: #fff; 
 
}

<div> 
 
    Using <tt>text-align: center</tt>; 
 
    <div class="parent ta"> 
 
    <div class="child"> 
 
     <div class="content wrong">child 1 LEFT</div> 
 
     <div class="parent ta"> 
 
     <div class="child"> 
 
      <div class="content">child a</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child b</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child c</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="child"> 
 
     <div class="content wrong">child 2 LEFT</div> 
 
     <div class="parent ta"> 
 
     <div class="child"> 
 
      <div class="content">child d</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child e</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child f</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="child "> 
 
     <div class="content right">child 3 CENTRE</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<br> 
 
<br> 
 
<div> 
 
    Using <tt>text-align: -vendor-center</tt> 
 
    <div class="parent browser-ta"> 
 
    <div class="child"> 
 
     <div class="content right">child 1 CENTRE</div> 
 
     <div class="parent browser-ta"> 
 
     <div class="child"> 
 
      <div class="content">child a</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child b</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child c</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="child"> 
 
     <div class="content right">child 2 CENTRE</div> 
 
     <div class="parent browser-ta"> 
 
     <div class="child"> 
 
      <div class="content">child d</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child e</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child f</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="child"> 
 
     <div class="content right">child 3 CENTRE</div> 
 
    </div> 
 
    </div>

実行スニペットと2つの類似したHTMLとCSS（Chromeで異なるレイアウトを生成：

問題は、この動作はtext-align: centerとtext-align: -webkit-centerまたはtext-align: -moz-centerの間で一貫性のないように見えるということですWebkit/Blink）とFireFoxをサポートしています。赤いパネルは間違った場所にあり、緑色のパネルは正しいです。

だからtext-align: -webkit-centerとtext-align: -moz-centerが正しいと思われますが、どちらのブラウザでもtext-align: centerが盗聴されているようです。

古い古い<centre>タグを掘り出して使用していますが、それも正しく動作します（ただし、それを調べるとブラウザの接頭辞も使用されます）。

これは間違いありませんか？これはバグですか？違いの理由はありますか？どちらを使うべきですか？

Answer 1

接頭語の値は、MDNで「ブロックアラインメント値」と記述されています。つまり、ブロックボックス自体がインラインコンテンツに加えて並べられています。これは<center>要素の正確な動作です。接頭語の値は実際にはです。 - 各エンジンのUAスタイルシートを見ると、正確にcenter { display: block; text-align: -vendor-center; }というルールセットが見つかります。

text-alignは、ブロックレベルのボックスではなく、インラインレベルのボックス（その名前の "text-"）に影響するように設計されているため、このように実装されていません。しかし、それはあなたが本当に求めている答えではないと思います。

実際にスニペットに配置されているボックスは、インラインブロックではなくブロックボックスである.content要素です。最後の要素が中央に置かれている理由は、その親であるインラインブロックがシュリンクラップされていて、それ自体が祖先のtext-align: center宣言によって中央揃えされているためです。