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

Posted 2023-02-18

【中文标题】如何居中显示：块/内联块

【英文标题】：How to center things - display:block/inline-block

【发布时间】：2013-05-10 07:00:51

【问题描述】：

当以 html 和 css 为中心时，我发现了两种方法 - 要么应用于元素：

display:block;
margin:0 auto;

或使用：

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

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

【参考方案1】：

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

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

Margin: auto，虽然第一次看到它时有点奇怪，但它是使块级别（位置静态）元素居中的最佳且唯一的方法。

对于显示的任何内容：内联（如跨度标记）- only 居中的方式是如果您指定 text-align: center 在父级上。这将使所有显示居中：inline inside，即 position: static;

Display: inline-block 是两者的混合体，相对是新的（但如果您使用另一个答案中提到的 hack，则支持早至 ie7）。使用内联块，您可以获得内联的好处，因为您可以将一堆东西彼此相邻并让它们都居中（想想所有导航项目都居中的导航），但也有每个item 充分利用了你通过 display: block 获得的一些东西 - 最重要的是 HEIGHT。

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

输入显示：inline-block。

【讨论】：

将此标记为答案显示：inline-block.!

【参考方案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;

【讨论】：

text-align 的名字不是；应该是inline-align。

【参考方案3】：

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

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