El objetivo aquí es centrar una columna en bootstrap. Bootstrap es un marco CSS gratuito y de código abierto dirigido al desarrollo web front-end receptivo y móvil. Hay dos enfoques para centrar una columna <div> en Bootstrap.
Enfoque 1 (compensaciones):
El primer enfoque utiliza la clase de compensación de arranque . La clave es establecer un desplazamiento igual a la mitad del tamaño restante de la fila. Entonces, por ejemplo, una columna de tamaño 2 se centraría agregando un desplazamiento de 5, eso es (12-2)/2. El siguiente ejemplo implementa esto.
html
<!DOCTYPE html> <html> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <body> <div class="container"> <div class="row"> <div style="height: 200px;" class="col-md-6 offset-md-3 text-center bg-success">. col-md-6 .offset-md-3</div> </div> </div> </body> </html>
Producción
Enfoque 2 (Margen automático):
Establecer los márgenes izquierdo y derecho en automático centrará el div con respecto a su elemento principal. El margen izquierdo y derecho se puede configurar con la clase .ml-auto y .mr-auto respectivamente. El siguiente ejemplo implementa esto.
html
<!DOCTYPE html> <html> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <body> <div class="container"> <div class="row"> <div style="height: 200px;" class="mr-auto ml-auto text-center bg-success"> .ml-auto .mr-auto</div> </div> </div> </body> </html>
Producción
Publicación traducida automáticamente
Artículo escrito por SnehashishKalamkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA