¿Cómo centrar múltiples elementos de bloque en línea con CSS?

Question

Quiero centrar horizontalmente dos (o posiblemente más) elementos de bloque en línea dentro de un elemento de bloque de contenedor. Se debe tener este aspecto:

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

Sin embargo, con mi código roto, que actualmente está buscando de esta manera:

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

La razón por la cual los dos anclajes deben estar en línea y no simplemente en línea es porque no quiero que el margen y el margen del ancla se solapen.

Answer 1

Simplemente configure text-align: center; en el contenedor div.

Answer 2

Establezca text-align: center; en el elemento primario.

Answer 3

¿Ha intentado lo siguiente?

div{ 
    text-align:center; 
} 

Answer 4

Cualquiera puede probar estos automática con un solo

div{ 
    text-align:center; 
} 

o conjunto margen, como se muestra a continuación

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

Un buen ejemplo se muestra here

Answer 5

Solía ​​text-align: "center" en el padre esta tainer, y eso centró los UL en la página, pero también centró el texto en los UL (no deseados). Así que agregué un text-align: "left" al <ul> para que el texto estuviera al lado del list-style.