如何使用 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;
}

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

简单设定text-align: center;在 div 容器上。