Toon posts:

div centreren

Pagina: 1
Acties:
  • 280 views

Acties:
  • 0Henk 'm!

  • kinderpindakaas
  • Registratie: Oktober 2006
  • Laatst online: 08-06 00:40
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:
  • 0Henk 'm!

  • WeeJeWel
  • Registratie: April 2007
  • Laatst online: 16-05 11:15
width: ..px;
margin: auto;

Homey — Critics are those without skills to create.


Acties:
  • 0Henk 'm!

  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 30-03 14:15

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:
  • 0Henk 'm!

  • dsibma
  • Registratie: Januari 2005
  • Laatst online: 14:50
Margin op auto zetten idd.

Acties:
  • 0Henk 'm!

  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 30-03 14:15

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:
  • 0Henk 'm!

  • kinderpindakaas
  • Registratie: Oktober 2006
  • Laatst online: 08-06 00:40
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:
  • 0Henk '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:
  • 0Henk 'm!

  • Zerotorescue
  • Registratie: November 2006
  • Laatst online: 18-05 08:17
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:
  • 0Henk 'm!

  • NMe
  • Registratie: Februari 2004
  • Laatst online: 08-06 15:30

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.


Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee