Comment aligner le Menu de Navigation pour le centre?

J'ai besoin d'aide pour aligner mon site web de nav menu de centre.

Voici mon code. Quel est le problème avec elle? Il n'a pas d'aligner le menu vers le centre.

HTML

<div class="menu_nav">
    <ul style="font-family:Ubuntu">
        <li><a href="index.html">Home</a></li>
        <li><a href="activities.html">Activities</a></li>
        <li><a href="games.html">Games</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>

CSS

.menu_nav {
    text-transform: uppercase;
    margin: 0 auto;

}
.menu_nav ul {
    list-style: none;
    margin: 0 auto;

}
.menu_nav ul li {
    margin: 0 auto;
    padding: 0 auto;

}
.menu_nav ul li a {
    display:block;
    margin: 0 auto;
    padding:35px 50px;
    color:#fff;
    text-decoration:none;
    font-size:20px;
}
  • avez-vous essayé margin-left:auto; et margin-right:auto; pour .menu_nav
  • Quel est le mal? Presque tout, vous n'avez défini aucune largeur spécifique sur la navigation. Que faites-vous exactement voulez faire?
  • Je le veux pour l'aligner au centre. Cela m'arrive quand je spécifier la largeur et de définir la marge de 0. Mais il affecte sur différentes tailles d'écran. Sur de plus grands écrans, il n'est pas aligné au centre, elle est déplacée vers la gauche sur de plus grands écrans et quand je ajuster la largeur de l'écran plus grand, il se déplace vers la droite un peu.
  • margin-left:auto; et margin-right:auto; pour .menu_nav ne l'affecte pas.
InformationsquelleAutor | 2013-08-28
  1. 3

    Vous êtes absent text-align:center.

    .menu_nav ul {
    list-style: none;
    margin: 0 auto;
    text-align:center;
}

    Violon: http://jsfiddle.net/84exq/

    • il n'affecte pas son alignement
    InformationsquelleAutor htxryan
  2. 1

    Afin d'utiliser margin: auto au centre de quelque chose, vous devez définir la largeur de l'élément de centrage. Vous pouvez le définir en pixels, en points (pt), em, ou des valeurs en pourcentage. Donc, pour résoudre ce problème, vous devez utiliser ce peu de CSS:

    .menu_nav ul {
    list-style: none;
    margin: 0 auto;
    width: 85%;
}

    Aussi, pour afficher les liens en ligne, utilisez le display: inline; bien sur la li éléments et retirer le display: block bien de la a éléments:

    .menu_nav ul li {
    margin: 0 auto;
    padding: 0 auto;
    display: inline;
}

    jsfiddle ici: notez que j'définir la largeur de la entourant div mais encore définir la largeur de la ul qui contient la navigation.

    • Je sais que je dois de définir la largeur de l'élément avec lequel je dois utiliser margin: auto ... j'en ai besoin pour travailler sur différents écrans, et il n'est pas de centraliser sur différentes tailles d'écran.
    • MERCI ... CELA A FONCTIONNÉ!
    InformationsquelleAutor djiango