CSS text-align funktioniert nicht

Habe ich diese css-code hier

.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;
}

Was ich versuche zu tun, ist Zentrum meiner Klasse navigation. Ich habe versucht, mit text-align:center; und vertical-align:middle; aber keiner von Ihnen arbeitete.

und hier ist der HTML-Code

<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-->

Wenn ich sage es funktioniert nicht, ich meine der text ist Links ausgerichtet.

  • Wollen Sie die ganze 5 Artikel-navigation zentriert unter das logo?
InformationsquelleAutor user1269625 | 2012-09-19
  1. 17

    Ändern der Regel auf Ihrem <a> element aus:

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

    zu

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

    Nur fügen Sie zwei neue Regeln (width:100%; und text-align:center;). Sie benötigen, um den Anker zu erweitern, um die volle Breite der Liste posten und dann text-align-center es.

    jsFiddle-Beispiel

    • es irgendwie funktioniert, aber noch nicht zentriert innerhalb der navigation div, schauen Sie bitte hier: jamessuske.com/surfthecurve
    • Wie das jsfiddle.net/j08691/gnXcg/1 ?
    • ja, genau so! Dank j08691
    • Kein problem. Für das Beispiel habe ich nur noch zwei Regeln zu Ihrem <ul> element. width:652px und margin: 0 auto;.
    InformationsquelleAutor j08691
  2. 9

    Haben Sie, um die UL innerhalb der div Verhalten sich wie ein block. Versuchen Sie,

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

    Ich versuche zu vermeiden, floating elements, es sei denn, das design der es wirklich braucht. Da haben Sie schwebte die <li> sind Sie aus dem normalen flow.

    Wenn Sie hinzufügen .navigation { text-align:center; } und ändern .navigation li { float: left; } zu .navigation li { display: inline-block; } dann die gesamte navigation wird zentriert werden.

    Einen Nachteil dieses Ansatzes ist, dass display: inline-block; wird nicht unterstützt IE6 und braucht einen workaround, damit es funktioniert in IE7.

    InformationsquelleAutor andyb
Schreibe einen Kommentar