[CSS/DIV] Lost perfect de horizontale centrering van CSS-pagina's op

Een veelgebruikte CSS-methode om elementen horizontaal te centreren

Elementen centreren met CSS is geen eenvoudige zaak - dezelfde legitieme CSS-centering-instellingen gedragen zich verschillend in verschillende browsers. Laten we beginnen met een paar veelvoorkomende manieren om elementen horizontaal te centreren in CSS.

1. Centering met automatische marges

De voorkeursmanier om elementen horizontaal te centreren in CSS is door de margin-eigenschap te gebruiken—zet gewoon de margin-links en margin-right properties op auto. In de praktijk kunnen we een container-div creëren voor deze elementen die gecentreerd moeten worden. Een punt om op te merken is dat de breedte van de container moet worden gespecificeerd:

div#container{ margin-left:auto; marge-rechts:auto; breedte: 168px; }

Deze aanpak werkt zeer goed in de meeste grote browsers, zelfs IE6 op Windows kan correct weergeven in zijn standaard compliance-modus. Helaas bereikt deze instelling in lagere versies van IE geen centrerend effect. Dus als je deze methode in een echt project wilt gebruiken, zorg er dan voor dat de IE-browserversie van de gebruiker niet lager is dan 6.0.

Ondanks het gebrek aan ondersteuning raden de meeste ontwerpers aan om deze aanpak zo veel mogelijk te gebruiken. Deze methode wordt ook beschouwd als de meest correcte en redelijke van alle methoden om elementniveaucentrering met CSS te implementeren.

2. Gebruik tekst-align om centrering te bereiken

Een andere manier om elementcentrering te bereiken is door de text-align eigenschap te gebruiken, de waarde van de eigenschap op centreren te zetten en deze toe te passen op het lichaamselement. Het is een hack door en door, maar het is compatibel met de meeste browsers, dus het is in sommige gevallen natuurlijk noodzakelijk.

Het wordt een hack genoemd omdat deze methode geen teksteigenschappen toepast op de tekst, maar op het element dat de container is. Dit geeft ons ook extra werk. Na het maken van de benodigde divs voor de lay-out, moeten we de text-align eigenschap toepassen op de body volgens de volgende code:

body{ text-align:center; }

Zullen er daarna problemen zijn? Alle nakomelingen van het lichaam zijn gecentreerd.

Daarom moeten we een andere regel schrijven om de tekst terug te brengen naar de standaard linker uitlijning:

p{ text-align:left; }

Het is denkbaar dat deze extra regel enige ongemakken veroorzaakt. Ook verandert een browser die echt de standaard volgt de positie van de container niet, maar centreert alleen de tekst erin.

3. Gebruik een combinatie van automatische marges en tekstuitlijning

Omdat de methode voor het centreren van tekstuitlijning goede achterwaartse compatibiliteit heeft en de automatische opvullingsmethode ook door de meeste hedendaagse browsers wordt ondersteund, gebruiken veel ontwerpers een combinatie van beide om de ondersteuning van het centeringseffect tussen browsers te maximaliseren:

body{ text-align:center; } #container{ margin-left:auto; marge-rechts:auto; rand: 1pxsolidred; breedte: 168px; text-align:links }

Maar dit is altijd een hack, en het is zeker niet perfect. We moeten nog steeds extra regels schrijven voor de tekst in de gecentreerde container, maar het ziet er in ieder geval goed uit in verschillende browsers.

4. Negatieve buitenmarge-oplossing

Oplossingen voor negatieve marges zijn verre van zo eenvoudig als het toevoegen van negatieve marges aan elementen. Deze methode vereist het gebruik van zowel absolute positionerings- als negatieve marge-technieken.

Hieronder volgt de specifieke implementatiemethode van dit schema. Maak eerst een container met gecentreerde elementen en plaats deze precies 50% van de linkerrand van de pagina. Op deze manier begint de linkermarge van de container bij 50% van de breedte van de pagina.

Stel vervolgens de linkermarge van de container in op de helft van de negatieve containerbreedte. Dit zal de container vastzetten op het midden van de horizontale richting van de pagina.

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; positie: absoluut; links: 50%; breedte: 760px; margin-left:-380px; }

Kijk, geen hacks! Hoewel dit niet de voorkeursoplossing is, is het een goede manier om het te doen, en het is erg veelzijdig – verrassend genoeg werkt het zelfs niet zonder problemen in NetscapeNavigator 4.x, toch? Dus als je het breedst mogelijke scala aan browserondersteuning wilt, is deze methode de beste keuze.