Comment puis-je centre le Zurb Foundation haut de la barre de nav?

Le haut de la barre de nav sur mon site est aligné à gauche comme ceci:

| Home | aveoTSD | Silent Nite          |

Je voudrais centrer le haut de la barre de nav comme ceci:

|          Home | aveoTSD | Silent Nite          |

Centre exactement comme le rouge de la barre avec "Exemple de texte".

Ici est mon css.

Je vous recommande de jeter le tout dans un JSFiddle et poster un lien vers la JSFiddle, ou de publier l'ensemble de votre code HTML et CSS directement ici plutôt que de faire un lien.
Je préfère travailler avec le site en direct, de sorte que le lien en haut a bien.
considérer ma réponse plus de celui que vous avez accepté
ce sujet de l'ajout .ligne à la nav? comme il est automatiquement centrage des choses, cela pourrait fonctionner comme un truc.
<div class="top-bar" id="exemple de menu"> <div class="row"> <div class="top-bar-gauche"> ..............

OriginalL'auteur user2343800 | 2013-05-31

  1. 18

    Vous pouvez le faire en ajoutant ceci à votre CSS (et, de préférence, la suppression contradictoires styles):

    .top-bar-section ul {display: table; margin: 0 auto;}
.top-bar-section ul li {display: table-cell;}
    +1 -- cela fonctionne parfaitement et est généralement la norme pour faire le plein de largeur centrée sur les éléments de la liste. Je ne sais pas pourquoi il a été rejeté.
    quand j'ai fait cette il a sali la petite version mobile, en particulier pour quelque chose d'éléments avec des menus déroulants. quelqu'un d'autre a ce problème ou connais la solution?
    Vous devriez poster une nouvelle question avec un lien pour vous aider dans cette démarche.
    Je suis allé de l'avant et fait et obtenu hampe par les modérateurs pour dupliquer des questions... ceux qui cherchent à mettre en œuvre ce, sans affecter effectuer des fonctionnalités de voir ma réponse ici

    OriginalL'auteur ralph.m

  2. 5

    Trouvé cela très utile:
    https://github.com/zurb/foundation/issues/1598

    Mettre le récipient de la navigation:
    text-align:center;

    Puis pour la navigation elle-même, régler l'affichage:
    display:inline-block;

    Espère que ça aide!

    pour voir le code-behind de la mise en œuvre de cette solution, voir la réponse ci-dessous

    OriginalL'auteur cleegp

  3. 2

    Ici est la meilleure solution que j'ai trouvé qui fonctionne pour tous les événements de redimensionnement. C'centres de la Fondation 5 Haut-éléments de la barre.

    SCSS: 

    nav.top-bar:not(.expanded) {
            text-align: center;
            section.top-bar-section { display: inline-block; }
                           }

    HTML:

    <div class="contain-to-grid">
<nav class="top-bar" data-topbar>
    <ul class="title-area">
        <li class="name">
            <h1><a href="#"></a></h1>
        </li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">
        <ul>
            <li><%= link_to 'LINK 1', root_path %></li>
            <li class="divider"></li>
            <li><%= link_to 'LINK2', link_path %></li>
            <li class="divider"></li>
            <li class="has-dropdown">
                <%= link_to 'Droping', "#" %>
                <ul class="dropdown">
                    <li><label>Label:</label></li>
                    <li><%= link_to 'DROP 1', drop_path %></li>
                    <li class="divider"></li>
                    <li><%= link_to 'DROP 2', drop_path %></li>
                </ul>
            </li>
            <li class="divider"></li>
        </ul>
    </section>
</nav>

    OriginalL'auteur blnc

  4. 0

    À l'aide de l'exemple ci-dessus, je fais un peu de bricolage. Le ci-dessus centres de tout. Les ajustements ci-dessous centres de la topbar, justifie à gauche le texte sur les menus déroulants et les centres de la "hamburger" /menu-icon lorsque mobile:

    /* center topbar */
/* set alignment to center for small screens */
nav.top-bar { text-align:center; }
nav.top-bar:not(.expanded) {
        text-align: center;
        section.top-bar-section { 
            /* align drop down menu text to left on large screens */
            text-align:left; 
            display: inline-block;

         }


}
/* center the mobile hamburger menu */
.top-bar .toggle-topbar.menu-icon {
 padding: 0;
 right: 50%;
 margin-right: -36px;
}

    OriginalL'auteur John W.