Ejemplo de centrado horizontal de una caja con CSS

Ejemplo de centrado horizontal de una caja con CSS

5
(1)

En esta publicación vemos un ejemplo de como podemos centrar una caja de tipo bloque mediante CSS.

Para ello aplicaremos estilos a un div con una clase de nombre «horizontal».

Aplicaremos también estilos universales para resetear el margin y el padding que el navegador da por defecto a todas las cajas (etiquetas).

Y como es de costumbre, usaré la propiedad box-sizing:border-box para asegurarme que el width y el height siempre es el que se indique.

Atención porqué el centrado vertical funciona de un modo muy distinto al horizontal. El centrado vertical requiere dominar el posicionamiento relativo y absoluto de cajas.

Ejemplo de centrado horizontal

centrado horizontal

La propiedad que hace que el div se centre es:

margin: auto;

Le estamos diciendo al navegador que recalcule los márgenes top, right, bottom y left.

En realidad también podríamos haber escrito

margin: 20px auto; 

o similar.

En este caso sólo recalcula los márgenes left y right.

Como el navegador forzará que haya el mismo margen en la izquierda que en la derecha, el resultado será que la caja queda centrada.

Fijaros que estamos centrando la caja pero no el texto.

Para que el texto se centre evitar usar las etiquetas obsoletas <center>.

En su lugar usamos la propiedad text-align:center;

Fijaros que al minimizar las dimensiones del navegador para poder hacer la captura de pantalla el texto ha pasado a ocupar 2 líneas en lugar de 1.

ejemplo centrado horizontal
Resultado final con la pantalla del navegador reducida.

¡Hola!

Querido lector,

ahora sólo queda practicar.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 1

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.