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

我想在容器块元素内将两个(或可能更多)行内块元素水平居中。它看起来应该像这样:

--------------------------
|      _____   _____      |
|     |     | |     |     |
|     | 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;
}

之所以必须将两个 anchor 设置为内联块，而不仅仅是普通的内联，是因为我不希望 anchor 的填充和边距重叠。

最佳答案

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