En ocasiones en HTML tenemos la necesidad de organizar el contenido de un contenedor a la derecha, izquierda y centro. Por ejemplo, en un header podemos querer un logo a la izquierda, un menú en el centro y una caja de búsqueda a la derecha.
Con el atributo float: left o float: right podemos ubicar rápidamente el contenido de la izquierda y la derecha, mientras que el elemento central puede centrarse dentro del contenedor mediante text-align: center y display: inline-block.
Alinear el menú a la izquierda y el contenedor central
Para crear esta distribución, primero se crean los elementos en HTML. Después se aplican las reglas CSS correspondientes a cada bloque: el elemento izquierdo utiliza float: left, el derecho utiliza float: right y el elemento central se muestra como un bloque en línea.
Con float: left o float: right, la parte izquierda y derecha se pueden ubicar de una forma rápida. Sin embargo, con float: left y float: right estos div adaptan su ancho al contenido, mientras que el del centro todavía ocupa todo el espacio disponible.
Para conseguir que el ancho del div central se adapte al de su contenido tenemos que indicar display: inline-block y, para que quede centrado según el espacio disponible, debemos indicar que el contenedor de los div tenga text-align: center.
El esquema CSS queda organizado de la siguiente forma:
| Elemento | Propiedad principal | Función |
|---|---|---|
| Contenedor | text-align: center | Centra el bloque central dentro del espacio disponible. |
| Elemento izquierdo | float: left | Ubica el contenido a la izquierda. |
| Elemento derecho | float: right | Ubica el contenido a la derecha. |
| Elemento central | display: inline-block | Adapta el ancho del bloque a su contenido. |
El código CSS utilizado es el siguiente:
.container { text-align: center; }
.left { float: left; background: blue; }
.right { float: right; background: red; }
.center { background: green; display: inline-block; }
Y ahora ya tenemos el resultado deseado: el contenido izquierdo queda alineado a la izquierda, el contenido derecho queda alineado a la derecha y el contenido central se coloca en el centro del contenedor.
Cómo centrar el div central con un ancho fijo
Otra forma de centrar el div central es asignarle un ancho fijo y establecer en la propiedad margin el valor 0 auto.
La regla margin: 0 auto distribuye automáticamente el espacio horizontal disponible a ambos lados del elemento cuando este tiene un ancho definido. De esta manera, el bloque central queda centrado dentro de su contenedor.
El código puede expresarse así:
.center { width: 300px; margin: 0 auto; }
Este método es apropiado cuando el elemento central debe conservar una anchura determinada. Si el ancho debe adaptarse al contenido, resulta más adecuado utilizar display: inline-block junto con text-align: center en el contenedor.
Alineación horizontal y alineación vertical
Cuando comenzamos a aprender maquetación HTML y CSS, al principio nos abruma la cantidad de etiquetas, atributos y propiedades que tenemos a nuestra disposición para crear contenido web. En algún momento llegamos a un dilema difícil de creer: necesitamos centrar un contenido verticalmente dentro de otro.
Existe una propiedad CSS llamada vertical-align a la que podemos darle el valor middle. Sin embargo, asignar la propiedad vertical-align al contenido en lugar de al contenedor no cambia las cosas.
El problema es que esta propiedad no hace exactamente lo que creemos. Su utilidad radica en indicar cómo deben alinearse entre sí varios elementos que se encuentran en una misma línea de texto y tienen diferentes alturas: desde el borde superior, desde el borde inferior, centrados u otras opciones.
Para conseguir el alineado vertical entre contenido y contenedor es necesario utilizar uno de varios métodos. Estos métodos también permiten conservar la alineación horizontal del contenido cuando se necesita combinar ambas direcciones.
Método 1: usar display: table-cell
El método que menos código exige consiste en utilizar display: table-cell. Si alguien ha trabajado con tablas de datos, notará que sus celdas admiten cambiar fácilmente la alineación de su contenido.
Podemos decirle al contenedor que se comporte como una celda de tabla añadiendo el siguiente código CSS:
.contenedor1 {
display: table-cell;
vertical-align: middle;
text-align: center; /* requerido para alineación horizontal */
}
.contenido1 {
display: inline-block;
text-align: left; /* requerido para volver a alinear texto izquierda */
}
Con este pequeño cambio, y eliminando la innecesaria propiedad vertical-align del elemento que contiene el texto, el contenido puede alinearse verticalmente en el centro y horizontalmente según la configuración indicada.
Ventajas de display: table-cell
- Requiere muy poco código CSS y HTML adicional.
- Permite utilizar vertical-align: middle sobre el contenedor.
- Puede combinarse con text-align: center para la alineación horizontal.
Inconvenientes de display: table-cell
- Semánticamente, el contenedor no es una celda de una tabla.
- Aunque este comportamiento se define en CSS y no en HTML, muchos puristas no desean utilizar esta medida.
Método 2: utilizar line-height
Si vertical-align sirve para alinear elementos dentro de una línea de texto, una opción consiste en hacer que la línea sea tan grande como el contenedor, de forma que el contenido quede alineado en el centro.
El código CSS puede escribirse de la siguiente manera:
.contenedor2 {
line-height: 150px;
text-align: center; /* requerido para alineación horizontal */
}
.contenido2 {
line-height: 1;
display: inline-block;
vertical-align: middle;
text-align: left; /* requerido para volver a alinear texto izquierda */
}
Ventajas de line-height
- No requiere demasiado código.
- No tiene implicaciones semánticas.
- Puede combinar la alineación vertical mediante vertical-align: middle con la alineación horizontal mediante text-align: center.
Inconvenientes de line-height
- Hay que conocer el alto en píxeles y especificarlo exactamente.
- No funciona indicando un porcentaje de 50%.
Método 3: usar display: flex
Con la llegada de CSS3 y HTML5, junto con flexbox, existen mecanismos avanzados que permiten controlar mejor situaciones como esta.
Con flexbox se puede centrar verticalmente el contenido mediante align-items: center. Para controlar también la alineación horizontal, el contenido puede utilizar margin: 0 auto.
El código CSS es el siguiente:
.contenedor3 {
display: flex;
align-items: center;
}
.contenido3 {
margin: 0 auto; /* requerido para alineación horizontal */
}
Ventajas de display: flex
- Utiliza los estándares modernos para los que fueron diseñados.
- Permite controlar la alineación vertical con align-items: center.
- Permite controlar la alineación horizontal mediante margin: 0 auto.
- Resulta especialmente útil para organizar un logo, un menú central y una caja de búsqueda en una misma línea.
Compatibilidad de display: flex
El método no funciona en Internet Explorer 9 o inferior y tampoco en otros navegadores muy antiguos.
Con la reciente retirada del soporte a antiguas versiones de Internet Explorer por parte de Microsoft, la recomendación final es utilizar el método con flexbox, que tiene la mayor garantía de compatibilidad futura.
Cómo Organizar un Menú con Flexbox | Alineación Perfecta en HTML y CSS
Qué método utilizar en cada situación
| Necesidad | Método adecuado |
|---|---|
| Alinear un bloque central cuyo ancho se adapta al contenido | display: inline-block y text-align: center |
| Centrar un bloque con ancho fijo | margin: 0 auto |
| Alinear verticalmente con poco código | display: table-cell |
| Alinear verticalmente usando una altura conocida | line-height |
| Controlar alineaciones horizontales y verticales con un estándar moderno | display: flex |
Para un encabezado con un logo a la izquierda, un menú en el centro y una caja de búsqueda a la derecha, la combinación de float, display: inline-block y text-align: center permite obtener una distribución sencilla.
Cuando además se necesita controlar la alineación vertical del contenido, flexbox ofrece una solución más completa mediante display: flex y align-items: center.
Existen muchas otras alternativas para conseguir este efecto, que igualmente pueden ser opciones válidas en función de las circunstancias. Estas opciones se eligen porque resultan sencillas de implementar en cuanto a código y equilibran la compatibilidad con los navegadores que ofrecen.