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

【问题标题】：How to center multiple inline-block elements with CSS?如何使用 CSS 使多个内联块元素居中？
【发布时间】：2012-02-03 15:22:23
【问题描述】：

我想在容器块元素内水平居中两个（或可能更多）内联块元素。它应该是这样的：

--------------------------
|      _____   _____      |
|     |     | |     |     |
|     | 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 重叠。

【问题讨论】：

标签： css

【解决方案1】：

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

【讨论】：

这很简单。我一直忘记text-align 也适用于非文本元素。
需要注意的是，如果您之前使用过float: left;，您必须确保删除该行并改用display: inline-block;。
如果foo 和bar 元素的宽度不同，这将不起作用。很遗憾。此外，当添加 margein-left 和 margin-right 值以在两个元素之间添加空格时，事情对我来说变得很奇怪。

【解决方案2】：

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

【讨论】：

【解决方案3】：

您是否尝试过以下方法？

div{
   text-align:center;
}

【讨论】：

【解决方案4】：

你可以试试这些

div{
   text-align:center;
}

或者如下图自动设置边距

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

展示了一个很好的例子here

【讨论】：

您的第二个示例不起作用（至少在 Safari 11 上）

【解决方案5】：

只是为了清楚......

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

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

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

会

【讨论】：

【解决方案6】：

我在父容器中使用了text-align: "center"，它使 UL 在页面上居中，但它也使 UL 中的文本居中（不需要）。所以我在<ul> 中添加了text-align: "left"，这样文本就在list-style 旁边。

【讨论】：

【解决方案7】：

你也可以这样做

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

使内联块水平居中！

【讨论】：