Html 如何居中 - display:block/inline-block
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16569577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center things - display:block/inline-block
提问by user2335065
When centering things in html and css, I find two approaches - either applying on the element :
当以 html 和 css 为中心时，我找到了两种方法 - 要么应用于元素：
display:block;
margin:0 auto;
or using:
或使用：
display:inline-block;
text-align:center; (on the parent element)
I always wonder which is better and why. Thanks!!
我总是想知道哪个更好，为什么。谢谢！！
回答by gcoladarci
This is a classic and important question.
这是一个经典而重要的问题。
Elements can either be inline (meaning they all sit next to each other - like a span tag) or they can be block (meaning the stack up on top of each other - like a div tag).
元素可以是内联的（意味着它们都彼此相邻——就像一个跨度标签），也可以是块（意味着堆叠在彼此之上——就像一个 div 标签）。
Margin: auto, while a bit odd when you first see it, is the best and only way to center a block level (position static), element.
边距：自动，虽然当您第一次看到它时有点奇怪，但它是将块级别（位置静态）元素居中的最佳且唯一的方法。
For anything that is display: inline (like a span tag) - the onlyway to center it is if you specify text-align: center on the parent. This will center everything display: inline inside it that is position: static;
对于 display: inline (如 span 标签) -居中的唯一方法是在父级上指定 text-align: center 。这将使所有内容居中显示：内嵌在其中的位置：静态；
Display: inline-block is a hybrid of the two that is relativelynew (but supported as far back as ie7 if you use the hack mentioned in another answer). With inline-block, you get the benefits of inline, in that you can you stick a bunch of things next to each other and have them all be centered (think of a nav where all nav items are all centered), but ALSO have each item take advantage of some of the stuff you get with display: block - the most important one being HEIGHT.
Display: inline-block 是两者的混合体，它相对较新（但如果您使用另一个答案中提到的 hack，则可以追溯到 ie7）。使用内联块，您可以获得内联的好处，因为您可以将一堆东西放在一起并让它们都居中（想想所有导航项目都居中的导航），但也有每个item 利用 display: block 获得的一些东西 - 最重要的一个是 HEIGHT。
Imagine a scenario where each nav item has a background image that is 80px tall - you can't make an inline element have a height of 80 - so you'd have to make each element display: block - only then can you give it a height. So to make them all appear next to each other, you'd float them. The problem is if you float them, you can't have them all be centered on the page unless you give a fixed width to the nav and margin: auto THAT. This means the nav has a fixed width - might be okay, but there are times when the nav has to have dynamic elements, different widths for different languages, etc.
想象一个场景，每个导航项都有一个 80 像素高的背景图像——你不能让内联元素的高度为 80——所以你必须让每个元素显示：块——只有这样你才能给它一个高度。所以为了让它们彼此相邻，你需要浮动它们。问题是如果你浮动它们，你不能让它们都在页面上居中，除非你给导航和边距一个固定的宽度：auto THAT。这意味着导航具有固定的宽度 - 可能没问题，但有时导航必须具有动态元素，不同语言的不同宽度等。
Enter display: inline-block.
输入显示：内联块。
回答by evuez
Block elements should always be centered using
块元素应始终使用居中
.block {
margin-left: auto;
margin-right: auto;
width: 600px;
}
as stated by the w3c: http://www.w3.org/Style/Examples/007/center.en.html#block
如 w3c 所述：http: //www.w3.org/Style/Examples/007/center.en.html#block
text-align: center;
is well-named: use it to center texts.
名副其实：用它来居中文本。
Update
更新
You can also use display: flexnow:
您display: flex现在还可以使用：
.parent {
display: flex;
justify-content: center;
}
.block {
width: 200px;
}
回答by Vinícius Moraes
There is no better way in this situation both approach will work and both are corrected. Just one thing display:inline-block doesn't work on IE7 (if you support this browser) you will need a hack to make it work
在这种情况下没有更好的方法，这两种方法都有效，并且都得到了纠正。只有一件事 display:inline-block 在 IE7 上不起作用（如果你支持这个浏览器）你需要一个黑客才能让它工作
display: inline-block;
*display: inline;
zoom: 1;
