Ik heb een horizontale menu balk (met list items).

De list items hebben een vaste hoogte en breedte. Nu is het zo dat er bij een paar de tekst doorgaat op de volgende regel:

| | |
| Link | Nog een |
| | link |


Nu wil ik de tekst van die link verticaal centreren, zodat het altijd in het midden blijft staan.

Ik heb al vanalles geprobeerd, maar niets hielp tot nu toe.... Wie kan mij helpen?
@Tamara

Voorbeeld linkje, of code? Dat is veel gemakkelijker... Daarnaast heb ik het idee, aan je omschrijving te zien dat je toch echt een verticaal menu bedoelt.;)
Verticaal centreren is niet moeilijk en daar is NOOIT een margin-top voor nodig. Iedereen doet dit tegenwoordig fout.

Wat je moet doen is een line-height instellen (en dan is een height automatisch overbodig), dan een element in het element waar je line-height hebt ingesteld creëren, een simpele span is al genoeg. Dan geef je line-height-element > span vertical-align, alles opgelost!

@dat voorbeeld: ik zie geen menu waar dat van toepassing is..
ik weet dat je het niet met margin-top kan instellen. het was even een tijdelijke oplossing :)

thnx voor je antwoord, ik ga het gelijk even aanpassen!


edit: jouw oplossing werkte niet (ik heb verschillende mogelijkheden geprobeerd...)
ik heb op internet een andere oplossing gevonden.

Voor degene die er iets aan hebben:

oplossing (cross-browser)
Waarom zou mijn oplossing niet werken als ik dat altijd gebruik?
Lachen. Ik wist niet dat display: table crossbrowser was. Maar zo te zien werkt het inderdaad goed.

@Tommy, dat van jou werkt ideaal voor de tekst op één regel en niet op meerdere regels.
nee klopt. je moet de list items display inline doen, vervolgens je anchor een display block mee geven

hierdoor mag je hoogtes en breedtes meegeven en kun je daarna alles mooi uitlijnen. Over de line height heeft tommy wel gelijk trouwens. Als je de lineheight in stelt op de regelafstand die je wil, past het net even wat beter en zit je minder te kloten met paddings en margins.. die hier officieus niet voor bedoeld zijn..

niet dat het erg is, want ook ik gebruik het soms.. hehe
Ik gebruik dat nooit. Maar IE wil soms daar niet mee werken. En display: inline, voor een list item gebruik ik altijd display: inline-block, das ook makkelijk om een block element helemaal te vullen met een anchor, ziet er iig netter uit dan width en height instellen vind ik. Maar IE pakt wederom inline-block niet.
je list items moet je trouwens wel gaan floaten als je de anchors op display:block; zet, maar dat is op zich wel logisch. Zorg er wel voor dat je een clear gebruikt eronder zodat het meteen weer verder kan met de normale flow van de pagina
Voor je list items moet je dus juist inline-block gebruiken. En dan voor IE een aparte style sheet..

Reageren