[css/xhtml] text verticaal centreren

[Geert.H]

Goedendag,
Ben nu al een tijdje aan het pielen met het volgende probleem, je kunt de testcase vinden op http://geerthoekzema.nl/almexx/woondiensten/

Ik probeer de tekst van het menu verticaal te centreren. Nu leek mij dat dat niet zo'n heel lastig probleem was, maar ik kom er niet uit. In firefox werkt alles prima, netzoals in opera, safari en chrome. Maar IE 7 ligt dwars.

Eerst even de code:

De HTML van het menu:

HTML:

<ul id="main-navigation">
    <li><a href="javascript:void(0);"><span>Taxatie</span></a></li>
    <li><a href="javascript:void(0);">Aankoop begeleiding</a></li>
    <li><a href="javascript:void(0);">Verkoop begeleiding</a></li>
    <li><a href="javascript:void(0);">Notaris</a></li>
    <li><a href="javascript:void(0);">Hypotheek advies</a></li>
    <li><a href="javascript:void(0);">Bouw keuring</a></li>
    <li><a href="javascript:void(0);">Energie label</a></li>
</ul>

En de bijbehorende CSS

Cascading Stylesheet:

#main-navigation { 
    clear:both; 
    margin:6px 6px 1px;  
    padding:0; 
    list-style-type:none; 
    height:63px; 
    background:url("images/backgroundMenu.gif") repeat-x scroll left top;
}
#main-navigation li { 
    float:left; 
    margin:0; 
    padding:0; 
    width:117px;  
    height:63px; 
    text-align:center; 
    border:1px solid red; 
    vertical-align:middle; 
}
#main-navigation li a { 
    text-decoration:none; 
    color:666; 
    font-size:1.3em; 
    display:block; 
    vertical-align:middle; 
    height:63px;  
    width:117px; 
    }

De dingen die ik heb geprobeerd:
1. Display:table-cell: wordt niet ondersteund door IE, dus valt af.

2. position:absolute - top:50%; margin-top:-00px. Dit heb ik niet geprobeerd omdat het niet werkt. Ik heb geen fixed height van mijn element.

3. vertical-align:middle op het li element, op het a-element. Dit in combinatie met een display block of inline. Maar niets van dat alles werkt.

En toch lijkt het me dat dit niet zo moeilijk te realiseren moet zijn...

[xzaz]

Vertical align is een kriem. Ik gebruikte voor LI>A altijd line-height. Probeer dat eens. Hier moet toch ook wel een antwoord tussen staan?

[ Voor 33% gewijzigd door xzaz op 28-11-2008 11:37 ]

[Da Weef]

In firefox werkt alles prima, netzoals in opera, safari en chrome.

Bij mij is de menu tekst in firefox en opera ook niet verticaal gecentreerd...

En inderdaad is het zetten van line-height op 63px (hoogte van li element) hier de oplossing...

[ Voor 23% gewijzigd door Da Weef op 28-11-2008 11:38 ]

[Geert.H]

Da Weef schreef op vrijdag 28 november 2008 @ 11:36:
[...]


Bij mij is de menu tekst in firefox en opera ook niet verticaal gecentreerd...

En inderdaad is het zetten van line-height op 63px (hoogte van li element) hier de oplossing...

klopt, dat het werkte was met display:table-cell. Foutje van mij.
Verder werkt het zetten van de line-height niet. Ik werk namelijk met meerdere regels. De gevallen van één regel die werken prima, maar bij twee regels gaat het fout

[FireDrunk]

Kun je dan neit beter meerdere lijstjes onder elkaar maken, met elk hun eigen stijl?
Dan zet je per stijl de line-height?

[Geert.H]

thijs_cramer schreef op vrijdag 28 november 2008 @ 11:46:
Kun je dan neit beter meerdere lijstjes onder elkaar maken, met elk hun eigen stijl?
Dan zet je per stijl de line-height?

Ik snap niet helemaal wat je bedoelt.. krijg een beetje het idee dat je het voorbeeld niet hebt bekeken

[xzaz]

Geert.H schreef op vrijdag 28 november 2008 @ 11:49:
[...]

Ik snap niet helemaal wat je bedoelt.. krijg een beetje het idee dat je het voorbeeld niet hebt bekeken

Hij bedoeld denk ik dat je elke regel een aparte (line) height opgeeft.
Kijk anders hier eens:
http://forums.digitalpoint.com/showthread.php?t=232287

[Geert.H]

Het probleem is dat de tekst variable is, dus ik weet niet wanneer ik één regel heb, of wanneer ik er twee heb.

Edit:
Ok ik heb een soort van oplossing, maar ben er eigenlijk niet tevreden mee. Mocht iemand dus een betere hebben dan houd ik mij aanbevolen.

Dit is de html

HTML:

<ul id="main-navigation">
    <li class="one-line"><a href="javascript:void(0);"><span>Taxatie</span></a></li>
    <li class="two-lines"><a href="javascript:void(0);"><span>Aankoop begeleiding</span></a></li>
    <li class="two-lines"><a href="javascript:void(0);"><span>Verkoop begeleiding</span></a></li>
    <li class="one-line"><a href="javascript:void(0);"><span>Notaris</span></a></li>
    <li class="two-lines"><a href="javascript:void(0);"><span>Hypotheek advies</span></a></li>
    <li class="one-line"><a href="javascript:void(0);"><span>Bouw keuring</span></a></li>
    <li class="one-line last-item"><a href="javascript:void(0);"><span>Energie label</span></a></li>
</ul>

En dit is de css

Cascading Stylesheet:

#main-navigation { 
    clear:both; 
    margin:6px 6px 1px;  
    padding:0; 
    list-style-type:none; 
    height:63px; 
    background:url("images/backgroundMenu.gif") repeat-x scroll left top;
}
#main-navigation li { 
    float:left; 
    margin:0; 
    padding:0; 
    width:117px;  
    height:63px; 
    text-align:center; 
    vertical-align:middle; 
    background:url("images/menuSeperator.gif") no-repeat scroll right center;
    position:relative;
}
#main-navigation li a { 
    text-decoration:none; 
    color:666; 
    font-size:1.3em; 
    display:block; 
    vertical-align:middle; 
    height:63px;  
    width:117px; 
    }
#main-navigation li a span { width:100%; margin:auto; position:absolute; top:13px; left:0;}
#main-navigation li.one-line a span { top:22px; }
#main-navigation li.two-lines a span { top:13px; }

[ Voor 88% gewijzigd door Geert.H op 28-11-2008 12:15 ]

[Raynman]

Die oplossing is inderdaad niet geweldig, bij mij staat "Hypotheek advies" bijv. op één regel en daardoor is die als enige niet gecentreerd. Dan zou je natuurlijk ook nog een <br> ertussen kunnen stoppen, maar daar wordt het ook niet netter van. Ik weet zo gauw ook niks beters.

Verder constateer ik (offtopic) een ernstig geval van de Engelse ziekte.

[Verwijderd]

HTML:

<style type="text/css">
    ul.navigatie li { display: table; margin: 0px; height: 39px; overflow: hidden; }
    ul.navigatie li a { width: 120px; line-height: 14px; display: table-cell; vertical-align: middle; }
</style>

<!--[if IE]>
    <style type="text/css">
        /* Aanbieding */
        ul.navigatie li { position: relative; }
        ul.navigatie li a { position: absolute; top: 50%; }
        ul.navigatie li a span { position: relative; top: -50%; }
    </style>
<![endif]-->


<ul class="navigatie">
 <li><a href="#"><span>korte titel</span></a></li>
 <li><a href="#"><span>een heel erg lange titel natuurlijk</span></a></li>
 <li><a href="#"><span>nog een korte</span></a></li>
</ul>

Dit heb ik een keer gemaakt, probeer het maar even naar je eigen omgeving te vlorken.. succes!

[Verwijderd]

Voor het verticaal centreren van iets waarvan de hoogte niet vast staat, kun je idd display:table-cell gebruiken. Let op dat Safari schijnbaar daaromheen blokken nodig heeft met display:table en display:table-row.
Voor IE6 heb ik dit eens verzonnen: Verwijderd in "[HTML] plaatje centreren verticaal" voor het verticaal centreren van een plaatje. Ik dacht dat het in IE7 ook werkte. Misschien heb je iets aan deze denkrichting.

edit:
Taal