CSS Centre de la barre de navigation de liens

De la difficulté à centrage du texte des liens sur ma barre de navigation, marge à gauche et à droite de l'auto ne fonctionne pas et j'ai essayé d'affichage de réglage de types de bloc/inline-block en vain. La solution est probablement de me regarder en face, je sais, mais je ne peux vraiment pas à le trouver.

CSS:

.navmenu {
    background-color: #1e1e1e;
    background-image: url("../images/NavBar.gif");
    background-position: top;
    border-top: 1px solid #383838;
    margin-bottom: 5px;
    z-index:105;
}
.navlink {
    margin-left:auto;
    margin-right: auto;
    width: 100%;
    font-size: 28px;
    text-transform: uppercase;
}

HTML:

<div class="navmenu">
    <div class="navlink">
        <a href="index.php">Home</a>
        <a href="http://twitch.tv/" target="_blank">Twitch</a>
        <a href="http://youtube.com/" target="_blank">YouTube</a>
        <a href="http://twitter.com/" target="_blank">Twitter</a>
        <a href="http://facebook.com/" target="_blank">Facebook</a>
        <a href="teamspeak.php">Teamspeak</a>
        <a href="/forum/">Forum</a>
    </div>
</div>

si aucune réponse a résolu votre question, veuillez envisager d'accepter en cliquant sur la coche et upvote. Cela indique à l'ensemble de la communauté que vous avez trouvé une solution et donne une certaine réputation à la fois le répondeur et vous-même. Il n'y a aucune obligation à le faire.

InformationsquelleAutor STiGYFishh | 2014-08-13

Utiliser flex pour obtenir plus flexible:

.navmenu { margin: 0 auto }
.navlink { display: flex; justify-content: center }

InformationsquelleAutor Glauco Raupp Russo

0

Dirait que vous êtes réglage .navlink width à 100%. Le réduire à la largeur du reste de votre contenu. J'ai essayé 800px et il a bien fonctionné.
- cela semble être la bonne solution basée sur le problème pour moi. la page doit tenir ensemble beaucoup mieux.
InformationsquelleAutor James Korden
0
```
.nav-menu{ width: 100%; text-align: center; }
```
Cela a fonctionné pour moi.

InformationsquelleAutor paolo

Vous CSS suivant sur .navlink

 .navlink {
  display: flex;
  justify-content: center;
}

CSS:

.navmenu {
    background-color: #1e1e1e;
    border-top: 1px solid #383838;
    margin-bottom: 5px;
    z-index:105;
}
.navlink {
    font-size: 14px;
    text-transform: uppercase;
    display: flex;
   justify-content: center;
}

.navlink a {
 color: #fff;
}

HTML:

<div class="navmenu">
    <div class="navlink">
        <a href="index.php">Home</a>
        <a href="http://twitch.tv/" target="_blank">Twitch</a>
        <a href="http://youtube.com/" target="_blank">YouTube</a>
        <a href="http://twitter.com/" target="_blank">Twitter</a>
        <a href="http://facebook.com/" target="_blank">Facebook</a>
        <a href="teamspeak.php">Teamspeak</a>
        <a href="/forum/">Forum</a>
    </div>
</div>

InformationsquelleAutor patelarpan

-1

j'ai une autre très bonne solution pour vous

<div id="nav">
    <span><a href="#">Twitter</a></span>
    <span><a href="#">Facebook</a></span>
    <span><a href="#">YouTube</a></span>
</div>


<!--Css style sheet for above code-->
#nav{
   width:100%;
   text-align:center;
}
#nav span a{
   text-decoration:none;
   padding:10px;
}

InformationsquelleAutor Sanjay Dutt

-2

Essayer:
```
.navlink { text-align:center }
```
- Cheers, savait que ce serait quelque chose de simple, toujours overthink tout.
- Alors que cela fonctionne, être conscient que cela peut paraître bizarre lorsque vous réduisez la page trop mince.
InformationsquelleAutor Diodeus - James MacFarlane
-2

Le haut logo est centré car il a une largeur fixe. La barre de navigation n'est pas centrée parce que c'est 100% de la largeur de l'écran. Si vous faites ce un pour cent inférieur ou de l'utilisation de la même largeur que le logo de l'image, ensuite, il sera centrée.
```
.navlink {
    margin-left:auto;
    margin-right: auto;
    width: 1024px;
    font-size: 28px;
    text-transform: uppercase;
}
```
- hmm, je fixe avec text-align center, mais je vais garder ça en tête des acclamations.
- Je ne sais pas pourquoi cela a été voté en bas. La barre de navigation a une image qui a une largeur fixe et ne peut pas être mis à l'échelle vers le bas.
InformationsquelleAutor George
-2

Ajouter text-align:center; à votre nav-link classe
```
.nav-link
{
text-align:center;
}
```
InformationsquelleAutor Tyler Iguchi

Vous devez vous connecter pour publier un commentaire.