web-dev-qa-db-fra.com

L'alignement du texte CSS 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 j'essaie de faire, c'est de centrer ma navigation de classe. J'ai essayé d'utiliser text-align:center; et vertical-align:middle; mais aucun d'eux n'a fonctionné.

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 ça ne fonctionne pas, je veux dire que le texte est aligné à gauche.

csstext-alignmenttext-align
10
user1269625

Modifiez la règle sur votre <a> élément 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;
}​

Ajoutez simplement deux nouvelles règles (width:100%; et text-align:center;). Vous devez agrandir l'ancre pour occuper toute la largeur de l'élément de liste, puis aligner le texte au centre.

exemple jsFiddle

17
j08691

Vous devez faire en sorte que le UL à l'intérieur du div se comporte comme un bloc. Essayez d'ajouter

.navigation ul {
     display: inline-block;
}
10
madth3

J'essaie d'éviter les éléments flottants à moins que le design n'en ait vraiment besoin. Parce que vous avez flotté le <li> ils sont hors de la normale flow.

Si vous ajoutez .navigation { text-align:center; } et changez .navigation li { float: left; } à .navigation li { display: inline-block; } alors toute la navigation sera centrée.

Une mise en garde à cette approche est que display: inline-block; n'est pas pris en charge dans IE6 et nécessite une solution de contournement pour le faire fonctionner dans IE7.

3
andyb