为什么 text-align 的浏览器前缀有不同的行为，哪个是正确的？

Question

我想垂直居中<div>标签，它们之间有一个水平边距。

问题在于text-align: center 和text-align: -webkit-center 或text-align: -moz-center 之间的这种行为似乎不一致：

.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>

运行 sn-p 和两个相似的 HTML 和 CSS 在 Chrome (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: center 没有以这种方式实现的原因是因为text-align 旨在影响内联级框（如其名称中的“文本-”所证明的那样），而不是块级框。但是，我怀疑这不是您真正想要的答案。

发生的情况是，在您的 sn-p 中实际对齐的框是 .content 元素，它们是块框，而不是内联块。最后一个元素 居中的原因是它的父元素（一个内联块）被收缩包装，然后其自身被其祖先中的 text-align: center 声明居中。