- 保证金左：自动;保证金权利：自动; - 或显示：内联块？

Question

我有一个容器，里面有一个980px宽的div。 哪个更兼容，如果我使用margin-left：auto，margin-right：auto对980px div或者如果我给text-align：center到容器并显示：inline-block到980px div？

感谢您的回答！

HTML：

<div class="container">
    <div class="content">
    <!---content here.... -->
    </div>
</div>

css v1：

.container {
    text-align: center;
}

.content {
    display: inline-block;
    width: 980px;
}

css v2：

.content {
    margin-left: auto;
    margin-right: auto;
    width: 980px;
}

那么浏览器最“兼容”的是什么，或者最佳做法是什么？

Answer 1

我建议使用margin: auto，不要覆盖元素的默认display值，除非确实必要。

将块框转换为内联块框会将其从通常的block formatting context移动到inline formatting context，这可能会导致副作用，例如由于基线和父line-height引起的垂直间隙element的字体，将标签间换行符显示为空格字符等。