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

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

Answer 1

只需text-align: center;在div容器上设置即可.

Answer 2

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

Answer 3

你试过以下吗？

div{
   text-align:center;
}