text-align: -webkit-center与text-align: center的区别

Question

有人知道为什么text-align：center和text-align：-webkit-center之间会存在差异吗？例如，如果你有：

<section>
 <h1>Title<h1>
 <div class="image"></div>
</section>

// 使用text-align: center的CSS；

section{
 text-align: center;

}

这将仅使文本居中

// CSS 代码为 text-align: -webkit-center

section{
 text-align: -webkit-center;
}

这将使文本和图片居中显示。

-moz-center同样适用于文本居中显示。

- Miles

Answer 1

text-align CSS属性描述了内联内容（如文本）在其父块元素中的对齐方式。text-align不控制块元素的对齐方式，只控制它们的内联内容。

text-align: -moz-center;
text-align: -webkit-center;

- tesrt

---

谢谢您的回复。顺便问一下，我应该将-moz-center和-webkit-center都添加到CSS类中吗？ - cmcromance

“-moz-center”和“-webkit-center”有什么区别？在dottoro.com文档中，它们似乎是相同的，“文本居中”。 - Quidam

@Quidam 是的，它们都是一样的，但是“-moz-center”在火狐浏览器上兼容，而“-webkit-center”在Chrome和Safari上兼容。 - Pavan Varyani

Answer 2

来自 Mozilla 开发者网络：

WebKit 和 Gecko 都支持一种加前缀的 left，center 和 right 版本，不仅适用于内联内容，还适用于块元素。这是用来实现 table 元素和 <center> 上遗留的 align 属性。请勿在生产网站上使用。

— 来自 MDN 关于 text-align 的文档。

- James Donnelly

---

如果谷歌首页正在使用“-webkit-center”，那么我认为它已经足够安全，可以用于生产环境... - hvaughan3