css - 为什么 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 对齐值”，这意味着除了其中的内联内容之外， block 框本身也是对齐的。这是 <center> 的确切行为元素，而前缀值实际上用于该元素 — 如果您查看每个引擎的 UA 样式表，您会发现一个规则集恰好说明了 center { display: block; text-align: -vendor-center; } .

原因text-align: center没有以这种方式实现是因为text-align旨在影响行内级框(正如其名称中的“text-”所证明的那样)，而不是 block 级框。但我怀疑，这并不是您真正想要的答案。

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