How to center multiple inline-block elements with CSS?

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.

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

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

have you tried the following?

div{
   text-align:center;
}

Either you can try these one

div{
   text-align:center;
}

or set margin auto as shown below

div a{
  margin:auto;
  margin-left:1em;
  margin-right:1em;
  margin-top:1em;
  margin-bottom:1em;
 display:inline-block;
}

A good example is shown here

Just to be clear ...

<div style="display: inline-block; text-align: center"> 
  ....
</div>

doesn't work with elements of different widths, but

<div style="text-align: center;">
<div style="display: inline-block;">
 ....
</div>
</div>

does

I used text-align: "center" in the parent container, and that centered the ULs on the page, but it also centered the text in the ULs (not desired). So I added a text-align: "left" to the <ul> so that the text was next to the list-style.

You can also do

.div {
    display: inline-block center;
    text-align: center;
}

to make the inline block center horizontally!