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

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

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

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

但是，由于我的代码已损坏，目前看起来是这样的：

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

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

HTML

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

---

两个锚定必须是内联块而不仅仅是纯内联的原因是因为我不希望锚定的填充和边距重叠。

Set

text align:center。
只需设置
文本对齐：居中在div容器上。
您是否尝试过以下操作

div{
   text-align:center;
}

或者你可以试试这个

div{
   text-align:center;
}

或按如下所示设置自动边距

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

一个很好的例子是
我在父容器中使用了
文本对齐：“居中”
，它使页面上的ULs居中，但也使ULs中的文本居中（不需要）。因此，我在
中添加了一个
文本对齐：“left”
，这样文本就位于
列表样式旁边，您也可以这样做

.div{
显示：内联块中心；
文本对齐：居中；
}

使内联块水平居中
 这很简单。我总是忘记
text align
也适用于非文本元素display:inline块foo
和
bar
元素的宽度不相同，则此操作无效。不幸的是。另外，在添加
margein left
和
margin right
值以在这两个元素之间添加空格时，事情变得越来越奇怪。您的第二个示例不起作用（至少在Safari 11上）