Centrar elementos verticalmente en CSS o Bootstrap siempre ha sido un desafío, especialmente para los desarrolladores que no son diseñadores de CSS.
En este artículo, veremos diferentes formas que podemos usar para centrar un elemento verticalmente en Bootstrap 4.
Bootstrap 4 tiene muchas características nuevas que hacen que sea más fácil que antes lograr diferentes técnicas.
Para alinear elementos verticalmente, Bootstrap 4 proporciona diferentes técnicas, como:
- Márgenes automáticos combinados con Flexbox,
- Utilidades Flex
- Utilidades de alineación vertical para cambiar la alineación vertical de elementos en línea, bloque en línea, tabla en línea y celda de tabla combinados con las utilidades de visualización
Cuando desee centrar un elemento verticalmente, pensaría en usar las utilidades de alineación vertical proporcionadas por Bootstrap, que solo funcionarán con elementos en línea, pero ¿qué sucede si desea centrar verticalmente un elemento dentro de su contenedor principal?
Supongamos que tenemos dos <div>elementos diseñados con Bootstrap .rowy .col-md-12desea centrar verticalmente la columna dentro de la fila.
<body>
<div class="container">
<div class="row">
<div id="col" class="col-md-12">
This needs to be vertically centered.
</div>
</div>
</div>
</body>
Centrar elementos verticalmente con márgenes automáticos
Puede centrar el #colelemento dentro de su padre usando márgenes automáticos, pero primero debe hacer que el padre tenga la altura completa.
Agregue la .h-100clase a la división de filas, lo que hará que tome la altura total disponible en su padre. A continuación, puede centrar el elemento utilizando la .my-autoclase de utilidad:
<body>
<div class="container">
<div class="row h-100">
<div id="col" class="col-md-12 my-auto">
This needs to be vertically centered.
</div>
</div>
</div>
</body>
El uso de la my-autoclase de utilidad se usa para establecer márgenes automáticos en el eje y, my significa margen en el eje y :
margin-top: auto;
margin-bottom: auto;
Elementos de centrado vertical con Flexbox
Bootstrap 4 hace uso de Flexbox. Como tal, ahora puede usar las utilidades de Flexbox para lograr fácilmente diferentes técnicas, como el centro vertical.
Simplemente necesita usar la .align-self-centerclase en su elemento para centrarlo siempre que su elemento padre tenga la display: flexpropiedad:
<body>
<div class="container">
<div class="row">
<div id="col" class="col-md-12 align-self-center">
This needs to be vertically centered.
</div>
</div>
</div>
</body>
La
.rowclase es un contenedor flexible, por lo que las utilidades de Flexbox funcionarán bien en ella. También puede usar.align-items-centeren la.rowdivisión para centrar verticalmente todos sus elementos secundarios.
Conclusión
En esta publicación, ha visto varias formas de centrar elementos verticalmente dentro de sus contenedores principales.
0 Comentarios
Dejanos tu comentario para seguir mejorando!