[CSS] vertical align in een list item

[Verwijderd]

Vraag:
Is het mogelijk om de inhoud van een list item verticaal te aligneren?

Probleem:
Ik heb een layer waarin een unordered list staat, als navigatie. Elk list item in die lijst is 30px hoog, en nu zou ik graag de hyperlinks in elk item rechts vanonder uitlijnen. Rechts is geen probleem (text-align: right) maar hoe krijg ik ze naar onder? Bijkomend probleem is de :hover pseudo-class die ik graag zou behouden. Die zorgt ervoor dat de achtergrondkleur verandert maar strooit nogal wat roet in het eten met zijn "display: block".

Pogingen tot oplossing:

• Link in absoluut gepositioneerde layer in relatief gepositioneerd list-item (li > div > a): geeft in IE onverklaarbare witruimte onder elk item, behalve de 2 bovenste. Firefox ok, maar niet echt een elegante oplossing (en ook niet conform de standaarden vermoed ik). Ik heb gemerkt dat die fantoom-IE-witruimte trouwens ook verschijnt als ik de link 10px groot maak (font-size dan). Dat heeft iets te maken met de "display: block", maar wat weet ik niet (en met de browser natuurlijk, maar soit).
• Link in absoluut gepositioneerde layer in relatief gepositioneerde layer in list-item (li > div > div > a): idem, en een wel heel omslachtige oplossing.
• nog 231,5 vruchteloze probeersels die ik me nu zelfs niet meer allemaal herinner

Ik vrees dat ik het te ver aan 't zoeken ben, maar Google en de zoekfunctie brengen geen soelaas. Waarschijnlijk wegens te algemene zoektermen, dus ik hoop dat iemand me kan verder helpen of doorverwijzen. Tables zijn natuurlijk ook mogelijk, maar ik vroeg me af of er geen elegante oplossing in CSS bestaat.

De HTML:

code:

<div id="navigationLeft">
  <ul id="navigationLeftList">
    <li><a href="#">link 01</a></li>
    <li><a href="#">link 02</a></li>
    <li><a href="#">link 03</a></li>
    <li><a href="#">link 04</a></li>
    <li><a href="#">link 05</a></li>
  </ul>
</div>

De CSS:

code:

#navigationLeft {
    width: 140px;
    height: 400px;
    background: #CC0000;
}

ul#navigationLeftList {
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid #7D0A18;
    border-bottom: 1px solid #D5616F;
}

ul#navigationLeftList li {
    height: 30px;
    border-top: 1px solid #D5616F;
    border-bottom: 1px solid #7D0A18;
}

ul#navigationLeftList a {
    display: block;
    width: 100%;
    height: 100%;
}

ul#navigationLeftList a:hover {
    background: #E8021E;
}

[Verwijderd]

Een beetje padding-top op het li element moet genoeg zijn. Zorg dat padding-top + line-height gelijk is aan 30, en geef de li geen hoogte mee.

[disjfa]

Cascading Stylesheet:

a{
   line-height:30px;
}

Vertical alignen gaat verder vrij moeilijk.

[Fuzzillogic]

Er is maar één manier om echt verticaal te centreren, en dat is in een table cell. Als je lekker hip en modern bent en lak hebt aan alles waar "Internet Explorer" in voorkomt, dan kun je met display: table-cell een willekeurig element laten doen alsof-ie een table cell is. Vertical align doet dan de rest.

Mocht je in de ongelukkige positie verkeren dat je ook IE gebruikers nog tevreden moet stellen, dan kun je met line-height en/of padding gaan spelen.

[Jrz]

knip weg

[ Voor 117% gewijzigd door Jrz op 16-11-2005 21:12 ]

[Verwijderd]

Bedankt voor de reacties!

Met het gebruik van padding is het gelukt (de line-height heb ik niet gebruikt omdat IE de hoogte ervan blijkbaar pertinent negeert). De links in mijn code zijn eigenlijk afbeeldingen van 8px hoog, dus in combinatie met een padding-top van 17px en een padding-bottom van 5px kom ik ook aan m'n 30px hoge li.

Het blijft echter een tussenoplossing omdat je altijd van de top moet beginnen rekenen. Dat is vervelend omdat ik twee link-afbeeldingen heb van 9px en die dus gecorrigeerd moeten worden mbv een extra class. Misschien iets voor CSS3, zo'n deftige vertical alignment?

@ Nexxennium:

Ik ben verre van hip en modern dus zorg ik dat alles ook werkt in IE ;-) Onnodig te zeggen echter dat dat nogal frustraties kan opleveren bij het maken van een pure CSS layout.