Breaking

Post Top Ad

Your Ad Spot

miércoles, 14 de agosto de 2019

Centrado vertical CSS, Flexbox

Centrar cosas verticalmente solía ser más difícil, pero en estos días con flexbox es muy fácil. 
  display: flex;
  justify-content: center; /* Horizontal Centering */
  align-items: center;     /* Vertical Centering */

Simplemente necesita establecer la displaypropiedad para el contenedor principal flexy luego establecer align-items: centerTodas las propiedades anteriores pertenecen al elemento principal , y no al elemento que realmente está tratando de centrar. 

En mi ejemplo, estoy centrando el cuadro en la página, y también estoy centrando el texto en el cuadro. El centrado horizontal se realiza con justify-content: centerAntes de flexboxque pudieras usar text-align: centery eso sigue siendo una opción.


Tenga en cuenta que otra propiedad que entra en juego al alinear cosas en flexbox es flex-directionLa dirección predeterminada es lo rowque significa que la dirección va horizontalmente a través de la página. No necesitaba configurarlo en mi bolígrafo, pero lo agregué porque la dirección es importante. También puede establecer la dirección a columnSi se configuró con columnlas propiedades que configuró para centrar las cosas, voltee. justify-content: centerharía que el contenido se centrara verticalmente (y luego centraría las align-items: centercosas horizontalmente).

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas