css - right - Centrar un elemento en Bootstrap 4 Navbar

navbar bootstrap 4

Question

No importa lo que intente, no puedo centrar algo en la barra de navegación de Bootstrap, ¿alguna solución para ello?

Intenté agregar un div, usando margin:0 auto; o margin-right:auto; margin-left:auto; margin-right:auto; margin-left:auto; , clase de center-block utilizada. Nada funciona, ¿por qué es tan difícil lograr algo tan simple que no puedo entender, qué estoy haciendo mal?

Aquí está el código actual:

<nav class="navbar navbar-fixed-top navbar-dark main-nav">
<div class="container">
    <ul class="nav navbar-nav pull-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav text-center">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>

Answer 1

¿Por qué no usar las utilidades de arranque? aquí está el código

    <nav class="navbar navbar-expand-md bg-light navbar-light fixed-top">
  <!-- Brand -->
  <a class="navbar-brand" href="#"><img src="your-logo"/></a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse mx-auto justify-content-md-center" id="collapsibleNavbar" >
    <ul class="navbar-nav col-md-auto">
      <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" href="#">Link</a>
      </li> 
    </ul>
  </div> 
</nav>

Answer 2

En Bootstrap 4, hay una nueva utilidad conocida como .mx-auto . Solo necesita especificar el ancho del elemento centrado.

Ref: http://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

A diferencia de la respuesta de Bass Jobsen, que es un centro relativo a los elementos en ambos extremos, el siguiente ejemplo está centrado en absoluto.

Aquí está el HTML:

<nav class="navbar bg-faded">
  <div class="container">
    <ul class="nav navbar-nav pull-sm-left">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-logo mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Brand</a>
      </li>
    </ul>
    <ul class="nav navbar-nav pull-sm-right">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 6</a>
      </li>
    </ul>
  </div>
</nav>

Y CSS:

.navbar-logo {
  width: 90px;
}

Answer 3

Prueba esto.

.nav-tabs > li{
    float:none !important;
    display:inline-block !important;
}

.nav-tabs {
    text-align:center !important;
}

Answer 4

Tuve un problema similar; el texto de anclaje en mi barra de navegación Bootstrap4 no estaba centrado. Simplemente agregó text-center en la clase del ancla.

Answer 5

Ver: https://.com/a/14146967/1596547 , ahora puede usar:

<nav class="navbar navbar-light main-nav">
<div class="container text-xs-center">
    <ul class="nav navbar-nav pull-xs-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav" style="display: inline-block;">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>
</nav>

aplique text-xs-center en su contenedor y configure display: inline-block; para tu lista

Answer 6

de los documentos

Las barras de navegación pueden contener fragmentos de texto con la ayuda de .navbar-text. Esta clase ajusta la alineación vertical y el espaciado horizontal para las cadenas de texto.

Apliqué la clase .navbar-text a mi elemento <li> , por lo que el resultado es

<li class="nav-item navbar-text">

Esto centra los enlaces verticalmente con respecto a mi marca de barra de navegación img

Answer 7

hacer un nuevo estilo

.container {
    position: relative;
}
.center-nav {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: auto;
    max-width: 200px;
    text-align: center;
}
.center-nav li{
  text-align: center;
  width:100%;
}

Reemplace el nombre del sitio web UL con el siguiente

<ul class="nav navbar-nav center-nav">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
 </ul>

Espero que esto ayude..

Answer 8

use mx-auto hará el trabajo

<ul class="navbar-nav mx-auto">

Answer 9

Actualizado para Bootstrap 4.1+

Bootstrap 4, la barra de navegación ahora usa flexbox para que el Website Name del Website Name pueda centrarse usando mx-auto . Los menús laterales izquierdo y derecho no requieren flotadores.

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
        </ul>
        <ul class="nav navbar-nav mx-auto">
            <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Rates</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Centro de barra de navegación con mx-auto Demo

Si la barra de navegación solo tiene una única navbar-nav , entonces navbar-nav justify-content-center también se puede usar para centrar.

EDITAR

En la solución anterior, el Website Name del Website Name está centrado en relación con la navbar-nav izquierda y derecha, navbar-nav lo que si el ancho de estos navegadores adyacentes es diferente, el Website Name del Website Name ya no está centrado.

Para resolver esto, se puede usar una de las soluciones alternativas de flexbox para el centrado absoluto ...

Opción 1 - Posición de uso: absoluta;

Como está bien usar el posicionamiento absoluto en flexbox, una opción es usar esto en el elemento que se va a centrar.

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Centro de barra de navegación con posición absoluta Demo

Opción 2: usar la anidación de flexbox

Finalmente, otra opción es hacer que el elemento centrado también se display:flexbox (usando d-flex ) y centrado justificado. En este caso, cada componente de la barra de navegación debe tener flex-grow:1

A partir de Bootstrap 4 Beta, ahora se display:flex la barra de navegación display:flex . Bootstrap 4.1.0 incluye una nueva clase de flex-fill para hacer que cada sección de navegación llene el ancho:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark main-nav">
    <div class="container justify-content-center">
        <ul class="nav navbar-nav flex-fill w-100 flex-nowrap">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">More</a>
            </li>
        </ul>
        <ul class="nav navbar-nav flex-fill justify-content-center">
            <li class="nav-item"><a class="nav-link" href="#">Center</a></li>
        </ul>
        <ul class="nav navbar-nav flex-fill w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Centro de barra de navegación con demostración de anidamiento de flexbox

Antes de Bootstrap 4.1.0, puede agregar la clase de relleno flexible de esta manera ...

.flex-fill {
   flex:1
}

A partir de 4.1 flex-fill se incluye en Bootstrap.

Demostraciones del centro de Bootstrap 4 Navbar
Más demostraciones centradas
Centrar enlaces en el escritorio, alinear a la izquierda en el móvil

Relacionado:
¿Cómo centrar elementos de navegación en Bootstrap?
Bootstrap NavBar con elementos alineados a la izquierda, centro o derecha
Cómo mover el elemento ''nav'' debajo de ''navbar-brand'' en mi Navbar