如何使用CSS将多个内联块元素居中？

Question

我想要在一个块级容器元素中水平居中两个（或者更多）内联块元素。应该看起来像这样：

--------------------------
|      _____   _____      |
|     |     | |     |     |
|     | foo | | bar |     |
|     |_____| |_____|     |
|_________________________|

然而，由于我的代码失效，它当前呈现出以下样子：

--------------------------
| _____   ____            |
||     | |     |          |
|| foo | | bar |          |
||_____| |_____|          |
|_________________________|

HTML

<div>
 <a>foo</a>
 <a>bar</a>
</div>

CSS

div a {
 display: inline-block;
 padding: 1em;
 margin: 1em;
 border: 1px solid black;
}

两个锚点必须是inline-block而不仅仅是普通的inline，原因是我不希望锚点的padding和margin重叠。

- JoJo

Answer 1

只需在 div 容器上设置 text-align: center;。

- Jakub

---

很简单，我总是忘记了 text-align 也适用于非文本元素。 - JoJo

需要注意的是，如果以前使用了 float: left;，那么必须确保删除该行并改用 display: inline-block;。 - Garrett Simpson

如果 foo 和 bar 元素的宽度不相同，则此方法无效。很遗憾。而且，当我添加 margin-left 和 margin-right 值以在两个元素之间添加间距时，情况变得有些奇怪。 - fIwJlxSzApHEZIl

Answer 2

在父元素上设置text-align: center;。

- Nate B

Answer 3

你尝试过以下方法吗？

div{
   text-align:center;
}

- Maksim Vi.

Answer 4

你可以尝试以下方法：

div{
   text-align:center;
}

或者按照下面所示将边距设置为自动。

div a{
  margin:auto;
  margin-left:1em;
  margin-right:1em;
  margin-top:1em;
  margin-bottom:1em;
 display:inline-block;
}

这里展示了一个很好的例子：这里，涉及到使用CSS媒体查询和HTML实现响应式网页设计。

- Daniel Nyamasyo

---

你的第二个例子不起作用（至少在Safari 11上）。 - aleclarson

Answer 5

"只是为了明确起见..."

<div style="display: inline-block; text-align: center"> 
  ....
</div>

不适用于宽度不同的元素，但是

<div style="text-align: center;">
<div style="display: inline-block;">
 ....
</div>
</div>

does

- Vincent Quigley

Answer 6

我在父容器中使用了 text-align: "center"，将页面上的 UL 居中对齐，但这也使得 UL 中的文本居中对齐（不是我想要的）。因此，我向 <ul> 添加了 text-align: "left"，以便文本位于 list-style 旁边。

- Jack Mason

Answer 7

你也可以这样做

.div {
    display: inline-block center;
    text-align: center;
}

让内联块水平居中！

- Mauve17