de ellende van verticaal centreren

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jeroen VD

Jeroen VD

09/05/2012 15:12:14
Quote Anchor link
zoals je aan de titel kunt zien: verticaal centreren vind ik een ramp. het lukt nooit! wat zijn tegenwoordig de beste technieken, zowel voor block als inline elementen?
 
PHP hulp

PHP hulp

25/12/2024 02:49:04
 
Wouter J

Wouter J

09/05/2012 15:32:50
Quote Anchor link
Dit: http://d-graff.de/fricca/center.html
of dit: http://css-tricks.com/centering-in-the-unknown/
 
Teun Hesseling

Teun Hesseling

09/05/2012 15:59:46
Quote Anchor link
Ik gebruik meestal dit stukje
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
#wrapper {width: 1024px; margin: 0px auto 0px auto; padding:0px 0px 0px 0px;}
Gewijzigd op 09/05/2012 16:00:26 door Teun Hesseling
 
Wouter J

Wouter J

09/05/2012 16:11:06
Quote Anchor link
Dat is dus voor horizontaal centreren.... En als je alleen horizontaal wilt centreren altijd jou code gebruiken, alleen verticaal centreren is -zoals jeroen zegt- een stuk moeilijker.

En tevens kan jou code een stuk korter:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
#wrapper
{
  width: 1024px; /* of welke breedte je ook maar wilt */
  margin: 0 auto;
  padding: 0;
}

Waarbij die padding: 0; niet nodig is voor het centreren.

Bij een 0 waarde hoeft er geen px achter. 0 is 0 ook in pixels. En je kunt margin, padding enzo inkorten via deze methode:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
margin: <margin-top> <margin-right> <margin-bottom> <margin-left>;
margin: <margin-top> <margin-right/left> <margin-bottom>;
margin: <margin-top/bottom> <margin-right/left>;
margin: <margin-top/bottom/right/left>;
 
Jeroen VD

Jeroen VD

09/05/2012 21:54:15
Quote Anchor link
Hmm oke, ik heb die tut doorgenomen, maar wat is het nut van dat ghost element?
 
Wouter J

Wouter J

09/05/2012 22:32:32
Quote Anchor link
Ik weet niet welke tut je bedoelt? Ik vind die eerste methode beter dan de 2e, dus heb je naar die 1e methode gekeken?

Als je .distance het ghost element noemt: die staat daar zodat het element nooit kan verdwijnen. Als je gewoon de trick met position absolute en negative - marges neemt en je verkleint je browser zul je zien dat het element verdwijnt. Met dat distance element voorkom je dit.
 



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.