CSS - Menulink verticaal centreren

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Tamara

Tamara

15/01/2009 11:35:00
Quote Anchor link
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?
Gewijzigd op 01/01/1970 01:00:00 door Tamara
 
PHP hulp

PHP hulp

28/02/2020 21:48:03
 
Robert Deiman

Robert Deiman

15/01/2009 11:44:00
Quote Anchor link
@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.;)
 
Tamara

Tamara

15/01/2009 11:50:00
 
Onbekend Onbekend

Onbekend Onbekend

15/01/2009 12:03:00
Quote Anchor link
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..
 
Tamara

Tamara

15/01/2009 12:05:00
Quote Anchor link
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)
Gewijzigd op 01/01/1970 01:00:00 door Tamara
 
Onbekend Onbekend

Onbekend Onbekend

15/01/2009 13:17:00
Quote Anchor link
Waarom zou mijn oplossing niet werken als ik dat altijd gebruik?
 
Niek Weevers

Niek Weevers

15/01/2009 14:53:00
Quote Anchor link
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.
 
Pieter Jansen

Pieter Jansen

15/01/2009 14:57:00
Quote Anchor link
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
 
Onbekend Onbekend

Onbekend Onbekend

15/01/2009 15:05:00
Quote Anchor link
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.
 
Pieter Jansen

Pieter Jansen

15/01/2009 15:10:00
Quote Anchor link
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
 
Onbekend Onbekend

Onbekend Onbekend

15/01/2009 15:26:00
Quote Anchor link
Voor je list items moet je dus juist inline-block gebruiken. En dan voor IE een aparte style sheet..
 
Niek Weevers

Niek Weevers

15/01/2009 16:21:00
Quote Anchor link
Geen inline-block gebruiken. Je kunt je list-items floaten. Dan lukt alles.

@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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
li {
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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.