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 .row
y .col-md-12
desea 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 #col
elemento dentro de su padre usando márgenes automáticos, pero primero debe hacer que el padre tenga la altura completa.
Agregue la .h-100
clase 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-auto
clase 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-auto
clase 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-center
clase en su elemento para centrarlo siempre que su elemento padre tenga la display: flex
propiedad:
<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
.row
clase es un contenedor flexible, por lo que las utilidades de Flexbox funcionarán bien en ella. También puede usar.align-items-center
en la.row
divisió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!