html - 如何居中 - 显示 :block/inline-block

Question

在 html 和 css 中居中时，我发现了两种方法 - 要么应用于元素:

display:block;
margin:0 auto;

或使用:

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

我总是想知道哪个更好，为什么。谢谢!!

Answer 1

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

元素可以是内联的(意味着它们彼此相邻 - 就像一个 span 标签)或者它们可以是 block 状的(意味着堆叠在彼此之上 - 就像一个 div 标签)。

margin: auto，虽然当你第一次看到它时有点奇怪，但它是最好的也是唯一的居中 block 级(静态位置)元素的方法。

对于 display: inline 的任何内容(如 span 标签)- 唯一居中的方法是在父级上指定 text-align: center。这将使所有 display: inline 居中，即 position: static;

Display: inline-block 是两者的混合体，相对 较新(但如果您使用另一个答案中提到的 hack，则最早支持 ie7)。使用内联 block ，您可以获得内联的好处，因为您可以将一堆东西彼此相邻并让它们全部居中(想想所有导航元素都居中的导航)，但也有每个item 利用 display: block 获得的一些东西 - 最重要的是 HEIGHT。

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

输入显示:内联 block 。