¿Cómo se puede centrar fácilmente horizontalmente un <div> usando CSS? [duplicar]
Estoy intentando centrar horizontalmente un <div>elemento de bloque en una página y establecerlo en un ancho mínimo. ¿Cuál es la forma más sencilla de hacer esto? Quiero que el <div>elemento esté alineado con el resto de mi página. Intentaré dibujar un ejemplo:
page text page text page text page text
page text page text page text page text
-------
| div |
-------
page text page text page text page text
page text page text page text page text
Aceptado
En el caso de un div de ancho no fijo (es decir, no se sabe cuánto espacio ocupará el div).
#wrapper {
background-color: green; /* for visualization purposes */
text-align: center;
}
#yourdiv {
background-color: red; /* for visualization purposes */
display: inline-block;
}<div id="wrapper">
<div id="yourdiv">Your text</div>
</div>Expandir fragmento
Tenga en cuenta que el ancho de #yourdives dinámico -> crecerá y se reducirá para acomodar el texto que contiene.
Puedes comprobar la compatibilidad del navegador en Caniuse
En la mayoría de los navegadores esto funcionará:
div.centre {
width: 200px;
display: block;
background-color: #eee;
margin-left: auto;
margin-right: auto;
}<div class="centre">Some Text</div>Expandir fragmento
En IE6 necesitarás agregar otro externo div:
div.layout {
text-align: center;
}
div.centre {
text-align: left;
width: 200px;
background-color: #eee;
display: block;
margin-left: auto;
margin-right: auto;
}<div class="layout">
<div class="centre">Some Text</div>
</div>Expandir fragmento
