JoJo JoJo - 4 months ago 10
CSS Question

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.

Answer

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