Centrer un élément dans Bootstrap 4 Navbar

Mis à jour pour Bootstrap 4.0.0

Bootstrap 4 la barre de navigation utilise maintenant flexbox de sorte que le Website Name peut être centrée à l'aide mx-auto. Le côté gauche et à droite des menus ne nécessitent pas de flotte.

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

barre de navigation center avec mx-auto Démo

Si la barre de navigation n'a qu'un seul navbar-navpuis justify-content-center peut également être utilisé pour centre.

MODIFIER

Dans la solution ci-dessus, le Website Name est centrée relative à gauche et à droite navbar-nav donc, si la largeur de ces adjacentes trajets sont différentes, la Website Name n'est plus centré.

Pour résoudre ce problème, l'un des flexbox des solutions de contournement pour absolue de centrage peut être utilisé...

Option 1 - Utiliser la position:absolute;

Depuis c'est ok pour utiliser le positionnement absolu dans flexbox, une option est à utiliser sur le point d'être centré.

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

Navbar centre avec position absolute Démo

Option 2 - Utilisation flexbox de nidification

Enfin, une autre option est de faire de l'centrée élément aussi display:flexbox et justifiée. Dans ce cas, chaque barre de navigation composant doit avoir flex-grow:1

De Bootstrap 4 Bêta, la barre de navigation est maintenant display:flex. Bootstrap 4.1.0 inclut une nouvelle flex-fill classe pour faire de chaque valeur liquidative section remplir la largeur:

<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 centre avec flexbox de nidification Démo

Avant Bootstrap 4.1.0 vous pouvez ajouter la flex-remplir de la classe comme ça...

.flex-fill {
   flex:1
}

---

Bootstrap 4 Navbar centre de démos

Voir aussi:

Comment le centre nav-éléments dans le Bootstrap?

Voir: https://stackoverflow.com/a/14146967/1596547maintenant, vous pouvez utiliser:

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

appliquer text-xs-center sur votre récipient et définir display: inline-block; pour votre liste.

de la documentation

Navbars peut contenir des morceaux de texte avec l'aide de .navbar-texte. Cette classe ajuste l'alignement vertical et horizontal de l'espacement pour les chaînes de texte.

j'ai appliqué la .barre de navigation de texte de la classe de mon <li> élément, de sorte que le résultat est

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

cette centres les liens verticalement par rapport à ma navbar-marque img