web-dev-qa-db-fra.com

Centrer un élément dans Bootstrap 4 Navbar

Quoi que j'essaye, je ne peux pas centrer quelque chose dans la barre de navigation Bootstrap, des solutions pour cela? 

J'ai essayé d'ajouter un div, en utilisant margin:0 auto; ou margin-right:auto; margin-left:auto;, utilisé la classe center-block. Rien ne fonctionne, pourquoi est-il si difficile de réaliser quelque chose d'aussi simple que je ne peux pas comprendre, qu'est-ce que je fais mal?

Voici le code actuel:

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

csstwitter-bootstrapbootstrap-4navbar
31
LuTz

Dans Bootstrap 4, il existe un nouvel utilitaire appelé .mx-auto. Il vous suffit de spécifier la largeur de l'élément centré.

Réf.: http://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

Différent de la réponse de Bass Jobsen, qui est un centre relatif aux éléments situés aux deux extrémités, l'exemple suivant est centré absolu.

Voici le code 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>

Et CSS:

.navbar-logo {
  width: 90px;
}
22
Victor

Mis à jour pour Bootstrap 4.1+

Bootstrap 4, la barre de navigation utilise maintenant flexbox afin que le Website Name puisse être centré avec mx-auto. Les menus latéraux gauche et droit ne nécessitent pas de flotteurs. 

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

Centre Navbar avec mx-auto Démo

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

EDIT

Dans la solution ci-dessus, le Website Name est centré relatif à gauche et à droite navbar-nav; ainsi, si la largeur de ces navs adjacents est différente, le Website Name n'est plus centré.

 enter image description here

Pour résoudre ce problème, l’une des solutions de contournement flexbox pour centrage absolu peut être utilisée ...

Option 1 - Position d'utilisation: absolue;

Puisqu'il est correct d'utiliser le positionnement absolu dans flexbox, une option consiste à utiliser ceci sur l'élément à centrer.

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

Centre Navbar avec position absolue Démo

Option 2 - Utiliser l'imbrication de boîtes flexibles

Enfin, une autre option consiste à rendre l'élément centré également display:flexbox et à justifier le centre. Dans ce cas, chaque composant de la barre de navigation doit avoir flex-grow:1

À compter de la version bêta de Bootstrap 4, la barre de navigation est maintenant display:flex. Bootstrap 4.1.0 inclut une nouvelle classe flex-fill pour que chaque section de navigation remplisse 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>

Centre Navbar avec imbrication Flexbox Démo

Avant Bootstrap 4.1.0, vous pouvez ajouter la classe flex-fill comme ceci ...

.flex-fill {
   flex:1
}

À partir de la version 4.1, flex-fill est inclus dans Bootstrap.

Démos de Bootstrap 4 Navbar Center

En relation:
Comment centrer les éléments de navigation dans Bootstrap?
Bootstrap NavBar avec des éléments alignés à gauche, au centre ou à droite

 enter image description here

45
Zim

Essaye ça. 

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

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

J'avais un problème similaire; le texte d'ancrage dans ma barre de navigation Bootstrap4 n'était pas centré. Il suffit d'ajouter text-center dans la classe d'ancrage.

1
Christy

utiliser mx-auto fera le travail

<ul class="navbar-nav mx-auto">
1
Hezy Ziv

Voir: https://stackoverflow.com/a/14146967/1596547 , vous pouvez maintenant 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>

appliquez text-xs-center sur votre conteneur et définissez display: inline-block; pour votre liste. 

1
Bass Jobsen

des docs

Les barres de navigation peuvent contenir des morceaux de texte à l’aide de .navbar-text. Cette classe ajuste l’alignement vertical et l’espacement horizontal des chaînes de texte.

j'ai appliqué la classe .navbar-text à mon élément <li>, de sorte que le résultat est 

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

cela centre les liens verticalement par rapport à mon imbar de marque navbar

0
austin

faire un nouveau style

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

Remplacer le nom du site Web UL par le suivant

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

J'espère que cela t'aides..

0
Ajay Makwana