css - texto - centrar imagen en div bootstrap

¿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. Debe tener un aspecto como este:

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

Sin embargo, con mi código roto, actualmente se ve así:

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

¿Has intentado lo siguiente?

div{
text-align:center;
}

Answer 2

Establecer text-align: center; en el elemento padre

Answer 3

O puedes probar estos

div{
text-align:center;
}

o establecer el margen automático 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 4

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

Answer 5

Usé text-align: "center" en el contenedor principal, 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" a la <ul> para que el texto estuviera al lado del list-style .