Box centreren met css3
Ik heb een box gedefinieerd welke ik in het midden van mijn (actuele) scherm wil hebben.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.webplein {
width: 835px;
height: 550px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
width: 835px;
height: 550px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
Nu staat deze box horizontaal wel in het midden maar verticaal niet. Hoe realiseer ik dit nu wel?
George
Hoe je dit gaat oplossen is vrij simpel.
http://www.webmasterstart.nl/css/verticaal-en-horizontaal-centreren.html
Gelieve voortaan even te googlen.
"verticaal en horizontaal centreren css" was voldoende geweest.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
.webplein {
position:absolute;
top: 50%;
left: 50%;
width: 835px;
height: 550px;
margin-top: -275px; /* de helft van je hoogte */
margin-left: -418px; /* de helft van je breedte */
}
position:absolute;
top: 50%;
left: 50%;
width: 835px;
height: 550px;
margin-top: -275px; /* de helft van je hoogte */
margin-left: -418px; /* de helft van je breedte */
}
Gewijzigd op 03/04/2013 17:10:55 door Frank Nietbelangrijk
En als we het dan toch over CSS3 hebben: gebruik het box-model (wel erg on-the-edge trouwens)
Wouter J op 03/04/2013 17:16:48:
De beste methode is deze: http://d-graff.de/fricca/center.html
Dat kun je zo niet stellen, want dat is helemaal afhankelijk van de omstandigheden. En dat artikel maakt de gebruikte techniek ook nog onnodig gecompliceerd: die floats zijn helemaal niet nodig. Voor een overzicht van alle -- intuïtieve -- methodes, zie dit verhaal: Vertical Centering in CSS (tutorial).
Gewijzigd op 04/04/2013 12:50:36 door Frank Conijn
Wouter J op 04/04/2013 13:43:53:
Frank, we hebben daar als eens eerder een discussie over gehad (dus niet echt nodig om het te herhalen). Maar alle (correcte) technieken in dat artikel komen op hetzelfde nadeel uit als het gebruik van de simpele absoluut positioneer systeem, namelijk: Zodra het scherm kleiner wordt dan de container zal de container langzamerhand aan de linker-/bovenkant wat verdwijnen ipv een scrollbar creëren en aan de linker-/bovenkant te blijven hangen.
Daar hebben we inderdaad al eerder eens een discussie over gehad. Ook toen poneerde je allerlei stellingen over mijn tutorial die helemaal niet waar zijn, en waaruit bleek dat je de tutorial helemaal niet gelezen had maar er wel allerlei oordelen over had.
En dat is nog steeds zo: "Maar alle (correcte) technieken in dat artikel komen op hetzelfde nadeel uit als het gebruik van de simpele absoluut positioneer systeem". Dat is onzin, omdat de meerderheid van de technieken die ik beschrijf dat nadeel helemaal niet hebben.
Gewijzigd op 04/04/2013 16:44:41 door Frank Conijn
Hier op Opera 12 gaat het echt totaal fout met dingen over elkaar wat er niet uitziet en andere dingen.
Code (php)
1
2
3
4
5
2
3
4
5
.parent{
display:flex;
justify-content:center; /* verticaal */
align-items:center; /* horizontaal */
}
display:flex;
justify-content:center; /* verticaal */
align-items:center; /* horizontaal */
}
In combinatie met bijna alle vendors werkt deze code in alle huidige browsers: http://caniuse.com/#feat=flexbox
http://codepen.io/WouterJ/full/wmeBA
Eddy E op 04/04/2013 21:50:43:
Toch mag die tutorial wel eens naar zijn eigen opbouw kijken.
Hier op Opera 12 gaat het echt totaal fout met dingen over elkaar wat er niet uitziet en andere dingen.
Hier op Opera 12 gaat het echt totaal fout met dingen over elkaar wat er niet uitziet en andere dingen.
Dan ben ik benieuwd naar een screenshot van je, want hier ziet het er in Opera 12 op een scherm van 1280px breed uit zoals het in alle grote browsers er uit ziet: Lightshot. En ook op 1024- en 1400-schermen ziet het er hetzelfde uit, zelfs op een 7-inch tablet van 1024px met viewportbeperking. Het is een grungy ontwerp, met intentioneel overlappende zaken, als je dat soms bedoelt?
En wat zijn de "andere dingen"? Toch niet de validiteit van de code of de site performance? Want voor beide testen slaagt hij met vlag en wimpel, zoals je zelf kunt constateren. En het kunnen toch ook niet de ingebouwde menu-touchscreenaanpassings- en lettergroottefuncties zijn, want die doen het ook gewoon in Opera. Al moet je in Opera soms wat vaker klikken om de letters te vergroten, maar dat komt door de afwijkende font-size-inherit-regels die Opera hanteert. (Net zoals dat de h-tag-lettergroottes afwijkend zijn in Opera.)
Tot slot zij opgemerkt dat (ook) jouw kritiek niets te maken heeft met de inhoud van de tutorial, zijnde verticaal centreren. Er wordt op de pagina zelf namelijk helemaal niets verticaal gecentreerd.
Ik krijg dus meer het idee dat het hier niet gewaardeerd wordt als je kritiek hebt op gevestigde personen.
Gewijzigd op 05/04/2013 11:08:40 door Frank Conijn
Milo S op 03/04/2013 17:06:39:
.............
Gelieve voortaan even te googlen.
"verticaal en horizontaal centreren css" was voldoende geweest.
Gelieve voortaan even te googlen.
"verticaal en horizontaal centreren css" was voldoende geweest.
Ben zelf nog redelijk een beginner vind ik op dit gebied maar wil toch even op je terug komen. Zo makkelijk is dat niet te vinden hoor, of iig niet een begrijpelijke versie. je krijgt 100den verschillende tips erover en ik heb ervaren dat ik er best veel moeite mee had in het begin.
De tip die ik hem nog wel zou willen meegeven is het volgende ipv wat er in de TS staat.
.webplein { width: 835px; height: 550px; margin:auto;}
Scheelt een hoop type werk.
(ben nieuw hier dus is het nog even rond kijken en aftasten hoe het hier is)