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.