No importa lo que intente, no puedo centro de algo en Bootstrap navbar, alguna solución para esto?

He intentado añadir un div, el uso de margin:0 auto; o margin-right:auto; margin-left:auto;, utiliza center-block clase. Nada funciona, ¿por qué es tan difícil lograr algo tan simple que no se puede 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>

Como de Bootstrap 4 alpha 6 (flexbox), aquí está la solución para la barra de navegación horizontal en el centro.

OriginalEl autor LuTz | 2015-11-23

8 Comentarios

  1. 24

    En Bootstrap 4, hay una nueva utilidad conocida como .mx-auto. Sólo necesitas especificar el ancho de la centrada en el elemento.

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

    Diferentes de Bajo Jobsen la respuesta, que es un pariente del centro a los elementos en ambos extremos, el siguiente ejemplo es absoluta centrado.

    Aquí está el código 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;
    }
    No es ideal, ya que requiere el establecimiento de un logotipo específico de ancho. También, no funciona en la alpha 6.
    stackoverflow.com/questions/45714674/bootstrap-4-center-list todavía funciona

    OriginalEl autor Victor

  2. 48

    Actualizado para el Bootstrap 4.1+

    Bootstrap 4 la barra de navegación, que ahora se utiliza flexbox por lo que el Website Name puede estar centrada en el uso de mx-auto. La izquierda y la derecha de los menús no requieren de carrozas.

    <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>

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

    Si la barra de navegación, sólo tiene un único navbar-nav, entonces justify-content-center también puede ser utilizado para el centro.

    EDITAR

    En la solución anterior, la Website Name se centra relativa a la izquierda y a la derecha navbar-nav así que si el ancho de estas adyacentes navs son diferentes, la Website Name no está más centrada.

    Centro de un elemento en Bootstrap 4 Navbar

    Para resolver esto, uno de los flexbox soluciones para absoluta centrado puede ser utilizado…

    Opción 1 – Usar position:absolute;

    Ya está bien de utilizar el posicionamiento absoluto en flexbox, una opción es el uso de esta en el punto de estar centrado.

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

    Navbar con centro posición absoluta Demo

    Opción 2 – el Uso de flexbox de anidación

    por último, otra opción es hacer la centrada en el producto también display:flexbox y centro justificada. En este caso, cada navbar componente debe tener flex-grow:1

    Como de Bootstrap 4 Beta, la barra de navegación es ahora display:flex. Bootstrap 4.1.0 incluye un nuevo flex-fill clase para hacer de cada nav relleno de la sección 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>

    Navbar con centro flexbox de anidación Demo

    Antes de Bootstrap 4.1.0 puede agregar el flex-relleno de clase como esta…

    .flex-fill {
       flex:1
    }

    Como de 4.1 flex-fill se incluye en Bootstrap.


    Bootstrap 4 Navbar centro de demostraciones

    Relacionados con:

    Cómo el centro de nav-elementos de inicio?

    Bootstrap barra de navegación de la izquierda, centro o derecha alineado elementos

    Cómo mover nav elemento bajo la barra de navegación de la marca en mi Navbar

    Centro de un elemento en Bootstrap 4 Navbar

    Opción 2 trabajó para mí! Tengo 2 preguntas, si no te importa: 1. ¿Qué es flex-grow haciendo? 2. ¿Cómo puedo aumentar el ancho del elemento center? Estoy buscando a utilizar el centro de elemento como una barra de búsqueda.
    Opción 1 trabajó para mí! Sólo recuerde para agregar la impresora ml-auto de la etiqueta con el texto en el lado derecho como ZimSystem señala en su CodePly demo.
    Has probado tu solución con Bootstrap 4 beta? De acuerdo a la siguiente artículo usted necesita para reemplazar .navbar-toggleable-sm a .navbar-expand-sm y .bg-inverse a .bg-dark.
    Sí fue actualizado con las últimas versiones
    ¿Cómo se utiliza la barra de navegación de colapso con esto?

    OriginalEl autor Zim

  3. 1

    Probar esta.

    .nav-tabs > li{
        float:none !important;
        display:inline-block !important;
    }
    
    .nav-tabs {
        text-align:center !important;
    }
    Eso es para nav-tabs.
    a continuación, utilice el mismo código de barra de exploración. va a trabajar.
    Lo siento amigo, no funciona.
    puede usted por favor, proporcione su dirección url? o cualquier vínculo de demostración. voy a checkout allí.
    Terminé con algo como esto : i.imgur.com/F8WBFok.png

    OriginalEl autor Priya Rajaram

  4. 1

    Ver: https://stackoverflow.com/a/14146967/1596547, ahora usted puede utilizar:

    <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>

    aplicar text-xs-center en su contenedor y establecer display: inline-block; para su lista.

    OriginalEl autor Bass Jobsen

  5. 1

    He tenido un problema similar; el texto de anclaje en mi Bootstrap4 navbar no estaba centrado. Simplemente agrega text-center en el anclaje de la clase.

    ¿qué vas a hacer….. para la etiqueta de entrada para hacer el centro?
    intenta <input class=»mx-auto» style=»width: 200px;»> con una entrada de display: block? o de la clase=»text-center»

    OriginalEl autor Christy

  6. 0

    hacer 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%;
    }

    Reemplazar el nombre del sitio web de la UL con la 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..

    OriginalEl autor Ajay Makwana

  7. 0

    de la documentación

    Navbars puede contener fragmentos de texto con la ayuda de .barra de navegación de texto. Esta clase ajusta la alineación vertical y horizontal de espacio para las cadenas de texto.

    he aplicado el .barra de navegación de texto de la clase a mi <li> elemento, por lo que el resultado es

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

    estos centros los enlaces verticalmente con respecto a mi navbar-marca img

    OriginalEl autor austin

  8. 0

    uso
    mx-auto va a hacer el trabajo

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

    OriginalEl autor Hezy Ziv

Dejar respuesta

Please enter your comment!
Please enter your name here