Как центрировать несколько встроенных элементов с помощью 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;
}

Причина, по которой два якоря должны быть встроенным блоком, а не просто встроенным, заключается в том, что я не хочу, чтобы перекрытие и маржа перекрывались.

Ответы

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