Wat is de professioneelste manier om te centreren? Ik gebruikte net margin-left: auto & margin-right: auto maar die methode werkt niet in IE. Help!?

gewoon een container div maken en align:center; voor body.

Of:
position:absolute;
left:50%;
margin-left:-500px;

Margin-left moet de helft zijn van de breedte van je site (bij 900px doe je -450px)

Volgensmij is margin-left: auto; margin-right: auto; netter toch ?

Origineel gepost door Cedric H.

gewoon een container div maken en align:center; voor body.

Of:
position:absolute;
left:50%;
margin-left:-500px;

Margin-left moet de helft zijn van de breedte van je site (bij 900px doe je -450px)

Nee daarmee verhelpt mijn probleem niet..

margin:0 auto; zo doe ik het altijd.. Kijk je doctype's na want dat moet altijd werken (als je een width opgeeft)..

Bedankt David heeft het verholpen. ;)

Indien dit probleem nog voorkomt, maak een container met de breedte van de layout en plak daarin margin: 0px auto; en padding 0px auto;.

Dan moet het werken. Het is (naar mijn weten) de mooiste manier.

Ik plaats altijd de hele website die gecentreerd moet worden in een div met css:

Code:

width: 900px;
margin: 0 auto;

Als dit niet werkt heb je misschien fouten in je html/css zitten, probeer de w3c validator dan eens, en deze voor je css

body {
margin:0px auto;
}

div#container {
width:900px;
margin:0px auto;
}

Dat is een manier die altijd hoort te werken als de rest goed
in elkaar steekt...

Nog professioneler is als je geen container div gebruikt maar,
de html en body volledig benut.

Code:

margin:0px auto;

doe ik altijd.. werkt goed ;)

body {
text-align:center; //IE debug
}

div#container {
text-align:left;
width:900px;
margin:0 auto;
}

Dit werkt altijd in alle browsers (en IE6)
Je zet eerst de text-align op center, waardoor IE6 denkt dat hij ook de <div> elementen in het midden moet zetten. Vervolgens zet je in de wrapper de tekst op links (text-align:left;)

Origineel gepost door annevdg

body {
text-align:center; //IE debug
}

div#container {
text-align:left;
width:900px;
margin:0 auto;
}

Dit werkt altijd in alle browsers (en IE6)
Je zet eerst de text-align op center, waardoor IE6 denkt dat hij ook de <div> elementen in het midden moet zetten. Vervolgens zet je in de wrapper de tekst op links (text-align:left;)

Waarom dan niet gewoon:

body {
margin:0px auto;
}

div#container {
width:900px;
margin:0 auto;
}

Dat schilt toch weer een style-regel. Dat lijkt niet veel maar
wanneer je website 10.000x bezocht is kan dat aardig wat
laadtijd schelen. Daarbij laad je website over het algemeen
sneller als de code kleiner is. Wanneer je zo 40 regeltjes bespaart
kan dat dus erg oplopen. En het werkt net zo goed.

waarom in de body margin:0 auto; opgeven? je body is de hele site, die kan je toch niet gaan centeren

gewoon
#blabla{
width:...px;
margin:0 auto;
}
werkt altijd met xhtml (gewoon zorgen dat je doctype correct is ingesteld)

Origineel gepost door Cédric Siroux

waarom in de body margin:0 auto; opgeven? je body is de hele site, die kan je toch niet gaan centeren

gewoon
#blabla{
width:...px;
margin:0 auto;
}
werkt altijd met xhtml (gewoon zorgen dat je doctype correct is ingesteld)

Oudere webbrowsers hebben soms nog een automatisch margin staan,
vandaar dat ook in de body die opdracht moet komen te staan. maar
volgens mij heb je gelijk en hebben moderne browseren + IE6 geen
margin staan en zou het dus ook zonder de opdracht in de body werken.

Het is nog beter om helemaal geen container te gebruiken maar de body
optimaal benut. Dan krijg je dus:

Code:

html, body {
   height:100%; /* Nou worden ze allebei goed getoond */
   margin:0px auto;
}
body {
   width:800px;
}

Dat schilt toch mooi een hele div in de html-pagina, en er is weer
een stukje css minder. Deze manier werkt in de moderne browsers
en IE6 dus eigenlijk gewoon crossbrowser.