How to center multiple inline-block elements with CSS?

Question

I want to horizontally center two (or possibly more) inline-block elements inside a container block element. It should look like this:

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

However, with my broken code, it is currently looking like this:

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

The reason why the two anchors have to be inline-block and not just plain inline is because I don't want the anchor's padding and margin to overlap.

Answer 1

Simply set text-align: center; on the div container.

Answer 2

Set text-align: center; on the parent element.