Hoe lijn je een <div> uit op het midden (horizontaal/breedte) van de pagina

Ik heb een div tag met breedte ingesteld op 800 pixels. Als de browserbreedte groter is dan 800 pixels, moet de div niet uitgerekt worden, maar naar het midden van de pagina gebracht worden.

Peter Mortensen
Bewerkte vraag 24ste6 maart 2019 в 10:51
Programmering
html css center alignment
5de4 juni 2009 в 1:44
22 views
Oplossing

    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
thirtydot
Bewerkt antwoord 7de2 maart 2012 в 4:48
Commentaren (10)

  1. Bedoel je dat je hem verticaal of horizontaal wilt centreren? Je zei dat je de hoogte op 800 pixels had gezet, en dat je de div niet wilde laten uitrekken als de breedte groter was dan dat...

  2. Om horizontaal te centreren, kun je het margin: auto; attribuut in CSS gebruiken. Ook moet je er dan voor zorgen dat de body en html elementen geen margin of padding hebben:

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
Peter Mortensen
Bewerkt antwoord 24ste6 maart 2019 в 10:53
Commentaren (0)

Om het ook correct te laten werken in Internet Explorer 6 moet je het als volgt doen:

HTML


    <div class="centered">
        centered content
    </div>

CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}
Peter Mortensen
Bewerkt antwoord 24ste6 maart 2019 в 10:53
Commentaren (1)