Centre de bootstrap de la marque et des éléments de liste

Il y a plusieurs questions à propos de centrage Twitter bootstrap de la marque ou de centrer les éléments de la liste dans la barre de navigation, mais je n'ai pas compris, comment faire pour centrer à la fois.

Voici un exemple, utilisé dans Modifier twitter bootstrap barre de navigation, mais il ne les centres les éléments de la liste, pas la marque.
Voici la structure du HTML:

<div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div>

Et le CSS:

.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align:center;
}

Ici une démonstration en direct: http://jsfiddle.net/C7LWm/

Comment aurais-je du centre de la marque et les éléments de la liste, de sorte que les deux sont centrés sur une seule ligne?

MODIFIER:

Je viens de remarquer que si vous avez une liste déroulante dans la barre de navigation (comme dans la mise à jour de votre réponse), la liste déroulante est vraiment foiré (liste déroulante ne s'affiche pas du tout, si elle se montre, la forme d'arrière-plan disparaît).
Une meilleure façon serait probablement, si tous les éléments ne sont pas centrées, et avoir une ligne par son, au lieu de cela, ils devraient tous être sur une seule ligne, puis être centré, semblable à la non-réactif de vue, sauf que maintenant, il y a une deuxième ligne.
Est-ce possible?

OriginalL'auteur cherrun | 2013-03-08

  1. 3

    Ce que vous devez center n'est pas le <li> mais leur conteneur. Il n'a pas d'importance si un élément enfant est flottant, seuls les parents que vous voulez réellement à centre doivent être inline-blocks.

    Je ne dirais pas que c'est agréable, et vous pouvez avoir besoin d'un comportement différent sur les petits écrans, mais cela fonctionne dans la démo :

    .navbar .brand,
.nav-collapse {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}
.navbar-inner > .container { text-align:center; }

    Assurez-vous que votre sélecteurs sont suffisamment spécifiques pour cibler uniquement les éléments que vous voulez (c'est à dire de ne pas le bouton de masquage)

    Mise à jour réactive barre de navigation : Sensible démo

    @media (max-width: 979px) {
    .navbar .brand,
    .nav-collapse {
        display: block;
    }
}
    Oui, il fonctionne très bien si vous l'utilisez sans s'effondrer. Dès que la barre de navigation s'effondre, elle fait un peu bizarre de nouveau. Lorsque la barre de navigation s'effondre, la marque doit être centré et les éléments de la liste doivent passer à la ligne suivante, pas à côté de la marque. Probablement pas aussi facile à résoudre.
    Vérifier mon montage pour certains réactif code.
    Désolé de revenir la réponse, merci de voir mon premier post pour plus d'explications.
    Je ne vois pas de problème avec les listes déroulantes. Vérifier github.com/twitter/bootstrap/issues/6019 pour résoudre un effondrement de la dysfonction.

    OriginalL'auteur Sherbrow

  2. 22

    Au centre de l'amt vous n'avez pas besoin d'écrire de classses.

    Bootstrap offre tout ce dont vous avez besoin, il suffit de faire ceci:

    <ul class="list-inline center-block text-center">
 //your list
</ul>
    C'est la meilleure réponse ici, pas besoin de ré-inventer la roue.
    la réponse parfaite
    Malheureusement il ne fonctionne pas avec BS 3.3+.

    OriginalL'auteur KJ Prince