Centrar vertical y horizontalmente con CSS3

Ago 11, 2017 | CSS, Diseño, DIVI (Elegant Themes), Tutoriales

Centrado Namaste Web MálagaEn este minitutorial, vamos a aprender como podemos centrar un contenido dentro de un modulo tanto horizontal como verticalmente.

Para ello vamos a utilizar la propiedad de CSS3 display: flex

Este ejemplo está realizado con el tema DIVI, aunque el código es extensible a otros temas.

Por ejemplo vamos a centrar una imagen de ejemplo (en este caso el logo de DIVI) en una fila.

En este caso partimos de una sección con una fila y dos columnas, una de texto y la imagen que queremos centrar.

El diseño quedaría así. Le he puesto color a las columnas para ver mejor el efecto.

Lo primero que debemos hacer es indicarle a la fila que iguale la altura de las columnas

El centrado horizontal no tiene mucha historia, ya que al módulo de imagen de DIVI solo hay que decirle que la imagen en vez de ponerla a la izquierda, la centre. El diseño de momento quedaría así:

Ahora toca centrar la imagen verticalmente, para ello nos vamos al CSS de la fila y en la casilla correspondiente al CSS del apartado principal de la columna 2 copiamos el siguiente código:

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;

Una vez introducido ese código, el diseño nos quedará de la siguiente manera, con la imagen centrada tanto horizontalmente como verticalmente.

Este código se puede utilizar para centrar cualquier contenido, ya sea una imagen, un texto, un formulario, etc.

Bueno, espero que este post os haya gustado y os haya sido de utilidad. Si ha sido así, por favor compartid y comentar que os ha parecido.

Summary
Review Date
Reviewed Item
Centrar vertical y horizontalmente con CSS3
Author Rating
51star1star1star1star1star

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
Share This
A %d blogueros les gusta esto: