Question

当在html和css中居中时，我找到了两种方法 - 要么应用元素：

display:block;
margin:0 auto;

或使用：

display:inline-block;
text-align:center; (on the parent element)

我总是怀疑哪个更好，为什么。谢谢！

Answer 1

这是一个经典而重要的问题。

元素可以是内联的（意思是它们彼此相邻 - 就像一个span标记），也可以是块（意味着堆叠在一起 - 就像div标签一样）。

保证金：自动，当你第一次看到它时有点奇怪，是将块级（位置静态），元素居中的唯一方法。

对于任何显示的内容：内联（如span标记） - 仅在中心的方式是在父项上指定text-align：center。这将显示所有显示内容：内置于内部的位置：静态;

显示：内联块是相对 new的两者的混合体（但如果你使用另一个答案中提到的hack，则支持ie7）。使用内联块，你可以获得内联的好处，因为你可以将一堆东西彼此相邻并让它们全部居中（想想所有导航项都在中心的导航），但也有每个item利用了显示的一些东西：阻止 - 最重要的是HEIGHT。

想象一下这样一个场景：每个导航项目都有一个高80像素的背景图像 - 你不能让内联元素的高度为80 - 所以你必须让每个元素都显示出来：阻止 - 只有你才可以给它一个高度。所以为了使它们彼此相邻，你会漂浮它们。问题是如果你浮动它们，你不能让它们都在页面上居中，除非你给导航和边距一个固定的宽度：auto THAT。这意味着导航具有固定的宽度 - 可能没问题，但有时候导航必须有动态元素，不同语言的宽度不同等等。

输入display：inline-block。

Answer 2

块元素应始终使用

居中

.block {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
}

如w3c所述：http://www.w3.org/Style/Examples/007/center.en.html#block

text-align: center;

有名的：用它来集中文本。

更新

您现在也可以使用display: flex：

.parent {
    display: flex;
    justify-content: center;
}
.block {
    width: 200px;
}

Answer 3

在这种情况下，没有更好的方法可以使两种方法都有效并且两者都得到纠正。只显示一件事：内联块在IE7上不起作用（如果你支持这个浏览器）你需要一个黑客来使其工作

display: inline-block;
*display: inline;
zoom: 1;

如何居中 - 显示：块/内联块

3 个答案:

更新