En Bootstrap, los elementos se pueden asignar fácilmente a la izquierda y a la derecha, ya que proporciona clases para la derecha y la izquierda. De forma predeterminada, se configuró a la izquierda, pero cuando se trata de alinear elementos al centro, debe alinearlos usted mismo ya que no hay clases integradas para hacer esto.
Básicamente, hay dos formas en las que puede alinear elementos al centro, que son las siguientes:
- Usando CSS
- Usando Bootstrap
Usando CSS: en este método, usaremos una clase definida por el usuario para alinear los elementos al centro. Luego, usaremos CSS para alinear los elementos al centro. Hemos definido la clase navbar-center .
- Ejemplo:
<!DOCTYPE html><html><head><title>Align nav bar item into center</title><linkrel="stylesheet"href=integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"/><linkrel="stylesheet"type="text/css"href=<linkrel="stylesheet"href=<style>.navbar-nav.navbar-center {position: absolute;left: 50%;transform: translatex(-50%);}</style></head><body><!--NAVBAR STARTING--><navclass="navbar navbar-expand-sm navbar-light bg-light"><divclass="container"><aclass="navbar-brand text-success"href="#">Geeksforgeeks</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarSupportedContent"><ulclass=" nav navbar-nav navbar-center"><liclass="nav-item active"><aclass="nav-link"href="#">Home<spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">About</a></li><liclass="nav-item"><aclass="nav-link"href="#">About</a></li></ul></div></div></nav></body></html> - Producción:
Usando Bootstrap: este método es un truco rápido que puede evitar que escribas CSS adicional. En esto, simplemente agregamos otra etiqueta div encima de la etiqueta div que tiene clase de colapso navbar-collapse . Esta nueva etiqueta div también tendrá la misma clase de colapso navbar-collapse .
- Ejemplo:
<!DOCTYPE html><html><head><title>Align nav bar item into center</title><linkrel="stylesheet"href=integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"/><linkrel="stylesheet"type="text/css"href=<linkrel="stylesheet"href=</head><body><navclass="navbar navbar-expand-sm navbar-light bg-light"><divclass="container"><aclass="navbar-brand text-success"href="#">Geeksforgeeks</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"></div><divclass="collapse navbar-collapse"id="navbarSupportedContent"><ulclass="navbar-nav mr-auto"><liclass="nav-item active"><aclass="nav-link"href="#">Home<spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">About</a></li><liclass="nav-item"><aclass="nav-link"href="#">Contact</a></li></ul></div></div></nav></body></html> - Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA