为什么 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>

运行该片段和两个相似的 HTML 和 CSS 在 Chrome (Webkit/Blink) 和 FireFox 中产生不同的布局。红色面板位置错误，绿色面板正确。

所以 text-align: -webkit-center 和 text-align: -moz-center 似乎是正确的（对我来说）但是 text-align: center 似乎在两个浏览器中都有问题。

挖掘出古老的 <centre> 标签（我们不应该使用）并且它也能正常工作（尽管检查它发现它也使用浏览器前缀）。

这是正确的吗？这是一个错误吗？有差异的原因吗？我应该使用哪一个？

Answer 1

前缀值由 MDN 描述为 "block alignment values"，这意味着除了其中的内联内容之外，块框本身也是对齐的。这是 <center> 元素的确切行为，前缀值实际上 用于该元素 — 如果您查看每个引擎的 UA 样式表，您会发现一个准确说明 center { display: block; text-align: -vendor-center; }.

的规则集

text-align: center 没有以这种方式实现的原因是因为 text-align 旨在影响行内级框（正如其名称中的 "text-" 所证明的），而不是块-水平箱。但是，我怀疑这不是您真正想要的答案。

实际情况是，您的代码段中实际对齐的框是 .content 元素，它们是块框，而不是行内块。最后一个元素是居中的原因是因为它的父元素，一个内联块，被收缩包装，然后它自己被其祖先中的 text-align: center 声明居中。

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

Why do browser prefixes for text-align have different behaviour and which is correct?

css

webkit

mozilla

cross-browser

vendor-prefix