div centreren

[kinderpindakaas]

Middels de volgende CSS code centreer ik meestal een div midden op het scherm.
Al dan niet ook verticaal gecentreerd

code:

#content {
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;    
    border: solid 1px #000;
}

Het probleem is echter dat als je je browser scherm zou verkleinen, dat dan de website links uit het beeld word gedrukt ipv dat hij een horizontale scrollbar laat zien.

Dit komt door de negatieve margin waardes.
Hoe kan ik dit voorkomen?

[WeeJeWel]

width: ..px;
margin: auto;

[OkkE]

Komt door de position: absolute waardoor het element uit de "flow" gehaald wordt. Een oplossing kan zijn een extra element in de pagina opnemen die je het zelfde formaat geeft, gewoon default position geven en bijvoorbeeld een opacity: 0.

[dsibma]

Margin op auto zetten idd.

[OkkE]

Wanneer de position: absolute niet noodzakelijk is, zou ik het inderdaad ook door middel van de margin: auto oplossen.

[kinderpindakaas]

Ok margin: auto is deels de oplossing.
Zou je position absolute weghalen, dan ben je de verticale centreer kwijt
Want hij is ze positionering referentie kwijt

code:

#content {
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: auto;
    border: solid 1px #000;
}

[Stouten]

Horizontaal centreren gebruik ik altijd:

margin: 0 auto;

voor, dan kun je left ook weglaten en heb je het probleem niet dat de website uit beeld verdwijnt.

[Voor 40% gewijzigd door Stouten op 27-05-2011 15:16]

[Zerotorescue]

code:

#content
{
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 100px;
}

Om horizontaal te centreren. Indien de inhoud van absolute/relative positionering geniet tegenover deze DIV, dan zet ik hier nog een "position: relative" bij om deze als offset te gebruiken zonder dat de margins mij boos gaan aankijken zoals bij "absolute" zou gebeuren.

Om het ook verticaal te centreren wordt het iets lelijker, het belangrijke hierbij is dat de BODY en HTML-tags een hoogte nodig moeten hebben.

code:

#content
{
    position: relative;
    top: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -50px;
    width: 200px;
    height: 100px;
}

[Voor 21% gewijzigd door Zerotorescue op 27-05-2011 15:29. Reden: code-tags]

[NMe]

Hoe vaak moeten we jou nog op ons beleid en onze search wijzen, kinderpindakaas? Je vraag is al zo vaak voorbijgekomen en beantwoord dat je echt gewoon niet gezocht kan hebben. Wij hebben echt meer dan genoeg van je luiheid.