Webtips

Een div centreren

Het is vrij eenvoudig om een div te centreren. De opzet bestaat eigenlijk uit twee stappen. De eerste is het aangeven dat zowel de linker- als de rechtermarge van de div ‘automatisch’ moeten worden bepaald, door margin: 0 auto; te declareren. Als het niet al te snuggere jongetje uit de klas begrijpt IE dit niet. Om deze browser een handje te helpen zetten we de volgende stap door text-align: center; aan de body toe te voegen. En klaar is onze gecentreerde div.

body {
text-align: center;
min-width: 600px;
}
#wrapper {
margin:0 auto;
width:600px;
text-align: left;
}

Door te schrijven dat de tekst in de body gecentreerd moet worden, geldt dit vanzelfsprekend - door het erven van eigenschappen - ook voor de tekst in de div. Door het toevoegen van text-align:left aan het doosje wordt dit verholpen.
De vraag is nu waarom de body een min-width aan zijn broek krijgt. Dit heeft te maken met gedrag in Mozilla. Als we dit niet vermelden, steekt de helft van de gecentreerde div aan de linkerkant uit de pagina. Het opgeven van een minimale breedte is de oplossing.
Voor meer informatie over de auto-margin methode: http://www.andybudd.com/…/centering_a_div