de ellende van verticaal centreren
Jeroen VD
09/05/2012 15:12:14zoals 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
05/11/2024 15:44:44Wouter J
09/05/2012 15:32:50Teun Hesseling
09/05/2012 15:59:46Ik gebruik meestal dit stukje
Gewijzigd op 09/05/2012 16:00:26 door Teun Hesseling
Wouter J
09/05/2012 16:11:06Dat 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:
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:
En tevens kan jou code een stuk korter:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#wrapper
{
width: 1024px; /* of welke breedte je ook maar wilt */
margin: 0 auto;
padding: 0;
}
{
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:
Jeroen VD
09/05/2012 21:54:15Wouter J
09/05/2012 22:32:32Ik 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.
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.