CSS - Menulink verticaal centreren
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?
Gewijzigd op 01/01/1970 01:00:00 door 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.;)
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..
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)
Gewijzigd op 01/01/1970 01:00:00 door Tamara
@Tommy, dat van jou werkt ideaal voor de tekst op één regel en niet op meerdere regels.
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
@merijn als je een element float, dan krijgt het automatisch een display: block. Dus ook met inline-elementen. Met een horizontaal menu gebruik ik altijd het volgende, en het werkt het beste
Code (php)
1
2
3
4
5
6
2
3
4
5
6
li {
float: left;
}
li a {
float: left;
}
float: left;
}
li a {
float: left;
}
en als je nog een margin gebruikt op je floatende elementen, dan geef je nog een display: inline mee, zodat je niet zit met de margin bug in ie6.