Question

我想垂直居中彼此之间有水平边距的<div>标签。

问题是此行为在text-align: center与text-align: -webkit-center或text-align: -moz-center之间似乎不一致：

＆＃13;

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

＆＃13;

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

＆＃13;

运行该代码段，两个类似的HTML和CSS在Chrome（Webkit / Blink）和FireFox中生成不同的布局。红色面板位置错误，绿色面板正确。

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

挖掘出古老的<centre>标记（我们不应该使用它）并且也正常工作（虽然检查它显示它也使用了浏览器前缀）。

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

Answer 1

MDN将前缀值描述为＆＃34;块对齐值＆＃34;，这意味着除了内部的内联内容之外，块框本身也是对齐的。这是<center>元素的确切行为，并且前缀值实际上是用于该元素 - 如果您查看每个引擎的UA样式表，您将找到一个准确说明center { display: block; text-align: -vendor-center; }的规则集。

text-align: center未实现这种方式的原因是因为text-align旨在影响内联级别的框（由＆＃34; text - ＆＃34;在其名称中）证明，不是块级别的盒子。但是，我怀疑，这不是你真正想要的答案。

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

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

1 个答案: