css - para - Centrar el contenido en la barra de navegación de arranque sensible
codigo para barra de navegacion en html (10)
Creo que esto es lo que estás buscando. Necesitas quitar el float: left de la navegación interna para centrarlo y convertirlo en un bloque en línea.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
Editar: si solo desea que este efecto se produzca cuando la navegación no esté plegada, rodéelo en la consulta de medios correspondiente.
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
Tengo problemas para centrar mi contenido en la barra de navegación de arranque. Estoy usando bootstrap 3. He leído muchas publicaciones, ¡pero el CSS o los métodos utilizados no funcionarán con mi código! Estoy realmente frustrado, así que esta es mi última opción. ¡Cualquier ayuda sería apreciada!
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<h1>Home</h1>
</div>
<!--JAVASCRIPT-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Este código me funcionó
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
Esto debería funcionar
.navbar-nav {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
Hay otra manera de hacer esto para diseños que no tienen que colocar la barra de navegación dentro del contenedor, y que no requieren ninguna anulación de CSS o Bootstrap.
Simplemente coloque un div con la clase de container Bootstrap alrededor de la barra de navegación. Esto centrará los enlaces dentro de la barra de navegación:
<nav class="navbar navbar-default">
<!-- here''s where you put the container tag -->
<div class="container">
<div class="navbar-header">
<!-- header and collapsed icon here -->
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!-- links here -->
</ul>
</div>
</div> <!-- close the container tag -->
</nav> <!-- close the nav tag -->
Si desea que el contenido del cuerpo luego se alinee con la barra de navegación central, también coloque ese contenido en la etiqueta del container Bootstrap.
<div class="container">
<! -- body content here -->
</div>
No todos pueden usar este tipo de diseño (algunas personas necesitan anidar la barra de navegación dentro del container ). No obstante, si puede hacerlo, es una forma fácil de centrar sus enlaces de la barra de navegación y su cuerpo.
Puede ver los resultados en esta página completa JSFiddle: http://jsfiddle.net/bdd9U/231/embedded/result/
Fuente: http://jsfiddle.net/bdd9U/229/
La publicación original preguntaba cómo centrar la barra de navegación colapsada. Para centrar los elementos en la barra de navegación normal, intente esto:
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
Parece que todas estas respuestas implican un css personalizado encima de bootstrap. La respuesta que ofrezco utiliza solo bootstrap, por lo que espero que sea útil para aquellos que desean limitar las personalizaciones.
Esto fue probado con Bootstrap V3.3.7
<footer class="navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-xs-offset-5 col-xs-2 text-center">
<p>I am centered text<p>
</div>
<div class="col-xs-5"></div>
</div>
</div>
</footer>
Utilizar siguiente html
<link rel="stylesheet" href="app/components/directives/navBar/navBar.scss"/>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<li><h5><a href="#/">Home</a></h5></li>
<li>|</li>
<li><h5><a href="#products">About</a></h5></li>
<li>|</li>
<li><h5><a href="#">Contacts</a></h5></li>
<li>|</li>
<li><h5><a href="#cart">Cart</a></h5></li>
</ul>
</div><!-- /.container-fluid -->
</nav>
Y css
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-default {
background-color: white;
border-color: white;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
background-color:white;
}
Modificar de acuerdo a sus necesidades.
V4 de BootStrap agrega Centro (justify-content-center) y Right Alignment (justify-content-end) según: https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
desde el sitio oficial de bootstrap (y, casi, como dijo Eric S. Bullington.
https://getbootstrap.com/components/#navbar-default
El ejemplo de la barra de navegación se ve así:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
...etc
Para centrar la navegación, que lo que he hecho:
<div class="container-fluid" id="nav_center">
css:
@media (min-width:768px) { /* don''t break navbar on small screen */
#nav_center {
width: 700px /* need to found your width according to your entry*/
}
}
trabaje con class = "container" y con la barra de navegación hacia la derecha o hacia la izquierda, y por supuesto puede reemplazar id por clase. :RE
Actualización 2018
Bootstrap 4
Centrar el contenido de la barra de navegación es más fácil con Bootstrap 4 y puede ver muchos escenarios de centrado explicados aquí: https://.com/a/20362024/171456
Bootstrap 3
Otro escenario que no parece haberse respondido aún es el centrado de los enlaces de la marca y la barra de navegación . Aquí hay una solución ..
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
@media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://www.codeply.com/go/1lrdvNH9GI
Ver también: Barra de navegación Bootstrap con elementos alineados a la izquierda, al centro o a la derecha