La alineación vertical cambia la alineación de los elementos verticalmente con la ayuda de las utilidades de alineación vertical. Las utilidades de alineación vertical solo afectan a los elementos en línea (Presente en una línea), bloque en línea (Presente como bloques en una línea), tabla en línea y celda de tabla (Elementos en una celda de una tabla). La alineación vertical de div es uno de los requisitos más básicos de una página web receptiva. Esto se puede lograr a través de CSS, pero la biblioteca Bootstrap tiene algunas clases creadas específicamente para este propósito. En este artículo, aprenderemos las clases disponibles y los métodos utilizados para la alineación vertical en Bootstrap. Consulte Alineación vertical en Bootstrap con ejemplos para otras clases de alineación vertical.
Aquí, discutiremos 2 clases integradas:
- Usando la clase align-items-center
- Usando la clase d-flex con la clase align-items-center
Comprendamos ambas clases a través de ejemplos.
Método 1: usar la clase align-items-center
En Bootstrap 5, si queremos alinear verticalmente un elemento <div> en el centro, podemos hacerlo aplicando la clase align-items-center en el elemento contenedor de ese div.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div class="row align-items-center bg-success text-light" style="min-height: 100vh"> <div class="col-md-12"> <h1>GeeksforGeeks</h1> </div> </div> </div> </body> </html>
Producción:
Método 2: usar la clase d-flex con la clase align-items-center
En Bootstrap 5, si queremos alinear verticalmente un elemento <div> en medio de un elemento contenedor, podemos hacerlo aplicando la clase align-items-center y d-flex en el elemento contenedor de ese div. Aquí, la clase d-flex tiene el mismo efecto que la de la pantalla: flex; propiedad en CSS.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="d-flex align-items-center" style="min-height: 100vh"> <div class="box w-100 text-success"> <h1>GeeksforGeeks</h1> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA