CSS text-align ne fonctionne pas

J'ai ce code css ici

.navigation{
    width:100%;
    background-color:#7a7a7a;
    font-size:18px;
}

.navigation ul {
    list-style-type: none;
    margin: 0;
}

.navigation li {
    float: left;
}


.navigation ul a {
    color: #ffffff;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
}

Ce que je suis en train de faire est le centre de ma classe de la navigation. J'ai essayé d'utiliser text-align:center; et vertical-align:middle;, mais aucun d'entre eux travaillaient.

et voici le Code HTML

<div class="navigation">
<ul>
<li><a href="http://surfthecurve.ca/">home</a></li>
<li><a href="http://surfthecurve.ca/?page_id=7">about</a></li>
<li><a href="http://surfthecurve.ca/?page_id=9">tutors</a></li>
<li><a href="http://surfthecurve.ca/?page_id=11">students</a></li>
<li><a href="http://surfthecurve.ca/?page_id=13">contact us</a></li>
</ul>
</div><!--navigation-->

Quand je dis que sa ne fonctionne pas, je veux dire que le texte est aligné à gauche.

Voulez-vous l'intégralité de l'article 5 de la navigation centrée sous le logo?

OriginalL'auteur user1269625 | 2012-09-19

  1. 16

    Modifier la règle sur votre <a> élément à partir de:

    .navigation ul a {
    color: #000;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
}​

    à

    .navigation ul a {
    color: #000;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
    width:100%;
    text-align:center;
}​

    Juste ajouter deux nouvelles règles (width:100%; et text-align:center;). Vous avez besoin de faire le point d'ancrage d'étendre à prendre toute la largeur de l'élément de la liste et ensuite text-align center.

    jsFiddle exemple

    il un peu de travaux, mais sa reste pas centré à l'intérieur de la navigation div, jetez un oeil ici jamessuske.com/surfthecurve
    Comme ceci jsfiddle.net/j08691/gnXcg/1 ?
    oui, juste comme ça! grâce j08691
    Pas de problème. Pour cet exemple, j'ai juste ajouté deux règles à votre <ul> élément. width:652px et margin: 0 auto;.

    OriginalL'auteur j08691

  2. 7

    Vous avez à faire la UL à l'intérieur de la div se comporter comme un bloc. Essayez d'ajouter

    .navigation ul {
     display: inline-block;
}

    OriginalL'auteur madth3

  3. 3

    J'essaie d'éviter d'éléments flottants, à moins que le design a vraiment besoin. Parce que vous avez émis l' <li> ils sont hors de la normale flux.

    Si vous ajoutez .navigation { text-align:center; } et changement .navigation li { float: left; } à .navigation li { display: inline-block; } l'ensemble de la navigation sera centré.

    Un inconvénient de cette approche est que display: inline-block; n'est pas pris en charge dans IE6 et a besoin d'une solution pour le faire fonctionner dans IE7.

    OriginalL'auteur andyb