Día 62: CSS Align

---

Alinear elementos al centro

Para centrar horizontalmente un elemento de tipo bloque (como <div>), use margin: auto;

Establecer el ancho del elemento evitará que se extienda hasta los bordes de su contenedor.

Entonces, el elemento ocupará el ancho especificado y el espacio restante se dividirá en partes iguales entre los dos márgenes:

Ejemplo:

Nota: La alineación central no tendrá efecto si la propiedad width no está configurada (o configurada al 100%).

---

Texto alineado al centro

Para centrar el texto dentro de un elemento, use text-align: center;

Ejemplo:

---

Centrar una imagen

Para centrar una imagen, establezca el margen izquierdo y derecho en auto y conviértalo en un elemento de bloque:

Ejemplo:

---

Alinear a la izquierda y derecha - usando position

Un método para alinear elementos es usar position: absolute;:

Ejemplo:

Nota: Los elementos con position: absolute; se eliminan del flujo normal del documento y pueden superponerse a otros elementos.

---

Alinear a la izquierda y derecha - usando float

Otro método para alinear elementos es usar la propiedad float:

Ejemplo:

---

El truco clearfix

Nota: Si un elemento es más alto que el elemento que lo contiene y flota, se desbordará fuera de su contenedor. Puedes usar el "truco clearfix" para arreglar esto (vea el ejemplo a continuación).

Luego, podemos agregar el truco clearfix al elemento contenedor para solucionar este problema:

Ejemplo:

---

Centrado vertical - usando padding

Hay muchas formas de centrar un elemento verticalmente en CSS. Una solución simple es usar padding superior e inferior:

Ejemplo:

Para centrar el contenido tanto vertical como horizontalmente, use padding y text-align: center:

---

Centrado vertical - usando line-height

Otro truco es usar la propiedad line-height con un valor que sea igual a la propiedad height:

Ejemplo:

---

Centrado vertical - usando position & transform

Si padding y line-height no son opciones, otra solución es usar el posicionamiento y la propiedad transform:

Ejemplo:

---

Centrado vertical - usando flexbox

También puede usar flexbox para centrar las cosas. Solo tenga en cuenta que flexbox no es compatible con IE10 y versiones anteriores:

Ejemplo:

---

Resumen

El tutorial de CSS cubre varias formas de alinear elementos en una página web, incluyendo centrar elementos de bloque con margin: auto;, centrar texto con text-align: center;, centrar imágenes con margin: auto; y display: block;, y alinear elementos a la izquierda y derecha con position: absolute; y float. También se discuten trucos para centrar verticalmente elementos, como usar padding, line-height, position y transform, y flexbox.

---

Traducido con 💚 desde W3Schools.com