Link im <li> vertikal zentrieren

    Hallo,
    ich wollte mal nachfragen ob zu dem Problem jemand eine Lösung kennt. Ich habe nun schon mehre Stunden rummprobiert aber noch keine Lösung gefunden :( .

    So sieht es bei mir aktuell aus:

    [Blockierte Grafik: http://www.abload.de/img/pic740mbu9.png]

    Wie man sieht ist die Schrift vertikal noch sehr unschön positioniert.

    Dies ist der HTML Aufbau:

    HTML
    <div id="nav">
    <ul>
        <li class="current_page_item"><a href="-">Startseite</a></li>
        <li class="page_item page-item-22"><a title="Impressum" href="-">Impressum</a></li>
        <li class="page_item page-item-20"><a title="Testseite1" href="-">Testseite1</a></li>
    </ul>
</div>

    Das die betreffende CSS:

    An der HTML Auszeichnung kann ich leider nichts ändern, da diese von Wordpress vorgegeben wird.

    Vielen Dank im Voraus!

    Hi,

    wenn die Links display:block haben (sollten sie bei derartigen navis immer, damit die ganze Schaltfläche klickbar ist), greifen vertikale paddings dafür. ;)

    Eine Höhe für ul/li brauchst du dann nicht.

    Die Zeilenhöhe durch line-height zu verändern, um das zu erreichen halte ich für keine gute Lösung, die Box wird ja dadurch nicht vergrößert.
    Außerdem benötigt line-height keine Maßeinheit weil es ein Faktor ist und das Ganze mit Maßeinheit zu Vererbungsproblemen führen kann (das steht auch in deinem geposteten Link!! ). ;)

    2 Mal editiert, zuletzt von koslowski (24. Januar 2010 um 10:08)

    also ich benutze nen span innerhalb vom a und mach die position relativ, dann kann ich munter loscoden und kann es frei nach schnauze positionieren.. denn nen echtes center sieht manchmal auch kacke aus...
    optik hat nicht immer was mit der echten mitte zu tun....

    Hallo,
    ich habe das noch nicht ganz verstanden ;) . Wenn das mit line-height nicht so schön ist, wie soll dann das display:block gesetzt werden?

    Zitat

    wenn die Links display:block haben (sollten sie bei derartigen navis immer, damit die ganze Schaltfläche klickbar ist), greifen vertikale paddings dafür.

    Ich habe es mal hier eingefügt:

    Code
    #nav ul li a
{
    color:#FFFFFF;
    font-weight:bold;
    padding:0px 12px;
    text-decoration:none;
[B]    display:block;
    vertical-align:middle;[/B]
}

    Das vertical-align war nur testweise - funktioniert ja eh nur bei inline Elementen. Aber das display:block brachte so leider gar nichts. Wie ist das mit den vertikalen Paddings gemeint?

    Danke

    Edit:

    So funktioniert es:

    Code
    #nav ul li a
{
    color:#FFFFFF;
    font-weight:bold;
    padding:0px 12px;
    text-decoration:none;
    display:block;
    height:24px;
    padding-top:6px;
}

    Kann man mit der Lösung leben?
    => Im IE6 und 5.5 wird die Navigation nicht gefloatet sondern untereinander dargestellt. Wenn ich dem li einen width gebe, geht es - ist aber sehr unschön => sollte es nicht auch ohne gehen?

    Zitat von Darkxor


    => Im IE6 und 5.5 wird die Navigation nicht gefloatet sondern untereinander dargestellt. Wenn ich dem li einen width gebe, geht es - ist aber sehr unschön => sollte es nicht auch ohne gehen?

    dann lass a auch floaten. ;)

    Mit display:block wird das inline-Element zum Blockelement und damit so breit wie es geht.

    Wenn li ohne width floatet sollte a grundsätzlich auch immer floaten, schon wg. IE6.

    Am besten ist immer ein Link zum Problem. ;)

    Zitat von Billbos

    Die line-height: immer so hoch wie die Navigation

    und was für einen Sinn sollte das haben? :roll:

    Zitat von koslowski

    Hi,
    Die Zeilenhöhe durch line-height zu verändern, um das zu erreichen halte ich für keine gute Lösung, die Box wird ja dadurch nicht vergrößert.
    Außerdem benötigt line-height keine Maßeinheit weil es ein Faktor ist und das Ganze mit Maßeinheit zu Vererbungsproblemen führen kann (das steht auch in deinem geposteten Link!! ). ;)

    selfrecycling find ich gut. :D