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

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.这将显示所有显示的内部:内部内嵌,即位置:静态;

显示:内联块是两者的混合,相对较新(但如果你使用另一个答案中提到的黑客,则支持ie7).使用内联块,你可以获得内联的好处,因为你可以将一堆东西彼此相邻并让它们全部居中(想想所有导航项都在中心的导航),但也有每个item利用了显示的一些东西:阻止 - 最重要的是高度.

想象一下这样一个场景,每个导航项目的背景图像高度为80px - 你不能让内联元素的高度为80 - 所以你必须让每个元素都显示出来:block - 只有这样才能给它一个高度.所以为了使它们彼此相邻,你会漂浮它们.问题是如果你浮动它们,你不能让它们都在页面上居中,除非你给导航和边距一个固定的宽度: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

在这种情况下没有更好的方法，这两种方法都有效，并且都得到了纠正。只有一件事 display:inline-block 在 IE7 上不起作用（如果你支持这个浏览器）你需要一个黑客才能让它工作

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