div centreren

Pagina: 1
Acties:
  • 331 views

Acties:
  • 0 Henk 'm!

  • kinderpindakaas
  • Registratie: Oktober 2006
  • Laatst online: 12-03-2024
Middels de volgende CSS code centreer ik meestal een div midden op het scherm.
Al dan niet ook verticaal gecentreerd

code:
1
2
3
4
5
6
7
8
9
10
#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?

Acties:
  • 0 Henk 'm!

  • WeeJeWel
  • Registratie: April 2007
  • Laatst online: 03-07 16:41
width: ..px;
margin: auto;

Homey — Critics are those without skills to create.


Acties:
  • 0 Henk 'm!

  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 06-02 08:32

OkkE

CSS influencer :+

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.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


Acties:
  • 0 Henk 'm!

  • dsibma
  • Registratie: Januari 2005
  • Laatst online: 19:57
Margin op auto zetten idd.

Acties:
  • 0 Henk 'm!

  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 06-02 08:32

OkkE

CSS influencer :+

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

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


Acties:
  • 0 Henk 'm!

  • kinderpindakaas
  • Registratie: Oktober 2006
  • Laatst online: 12-03-2024
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:
1
2
3
4
5
6
7
8
#content {
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: auto;
    border: solid 1px #000;
}

Acties:
  • 0 Henk 'm!

  • Stouten
  • Registratie: November 2006
  • Laatst online: 08-06-2022
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 ]


Acties:
  • 0 Henk 'm!

  • Zerotorescue
  • Registratie: November 2006
  • Laatst online: 04-06 11:49
code:
1
2
3
4
5
6
7
#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:
1
2
3
4
5
6
7
8
9
10
#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 ]


Acties:
  • 0 Henk 'm!

  • NMe
  • Registratie: Februari 2004
  • Laatst online: 04-07 15:03

NMe

Quia Ego Sic Dico.

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.

:w

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

Pagina: 1

Dit topic is gesloten.