Web Style Sheets
CSS TIPS & TRUCS

Dit document is een Nederlandse vertaling van een Engelstalig document:

Deze vertaling werd gemaakt door Saffier Verkaik, maar kan nog enkele fouten bevatten. In geval van twijfel verwijzen wij naar de officiële Engelstalige versie.

Deze versie:
Buy a home in Tampa Vertaler:
Saffier Verkaik
Auteursrecht:
Copyright 1999 W3C ( MIT, INRIA, Keio). Alle rechten voorbehouden. W3C-regels betreffende aansprakelijkheid, handelsmerk, documentgebruik en softwarelicentiëring zijn van toepassing.

(This page uses CSS style sheets)

Regels

Blokken

Verticaal

Demonstratie

DINGEN CENTREREN

Een gebruikelijke taak voor CSS is het centreren van tekst of afbeeldingen. In feite bestaan er drie soorten centrering:

CENTREREN VAN REGELS TEKST

Het meest gebruikelijke en (daarom) makkelijkste type van centreren is dat van regels tekst in een paragraaf of kop. CSS heeft hiervoor de eigenschap ‘text-align’:

P { text-align: center }

H2 { text-align: center }

zet elke regel over in een P of in een H2 gecentreerd tussen de marges, zoals hier:

De regels in deze paragraaf zijn allen gecentreerd tussen de marges van de paragraaf, dankzij het value ’center’ van de CSS eigenschap ‘text-align’.

HET CENTREREN VAN EEN BLOK OF EEN AFBEELDING

Soms is het niet de tekst die gecentreerd moet worden, maar het blok als geheel. Of, anders uitgedrukt: wij willen dat de linker en rechter marge gelijk zijn. De manier om dat te doen is door de marges op ‘auto’ te zetten. Dit wordt normaal gebruikt bij een blok met vaste breedte, omdat indien het blok zelf flexibel is, het simpelweg de gehele breedte zal innemen. Hier is een voorbeeld:

P.blocktext {

    margin-left: auto;

    margin-right: auto;

    width: 6em

}

...

<P class="blocktext">This rather...

Dit nogal smalle blok met tekst is gecentreerd. Merk op dat de lijnen binnen het blok niet gecentreerd zijn (zij zijn links uitgelijnd), anders dan in het vorige voorbeeld.

Dit is ook de manier om een afbeelding te centreren: maak er een op zichzelf staand blok van en pas de marge eigenschappen toe. Bijvoorbeeld:

IMG.displayed {

    display: block;

    margin-left: auto;

    margin-right: auto }

...

<IMG class="displayed" src="..." alt="...">

De volgende afbeelding is gecentreerd: some random image

VERTICAAL CENTREREN

CSS niveau 2 heeft geen eigenschappen om dingen verticaal te centreren. Er zal er vermoedelijk een zijn in CSS niveau 3. Maar zelfs in CSS2 kunt u blokken verticaal centreren, door enkele eigenschappen te combineren. De truc is te specificeren dat het buitenste blok geformatteerd moet worden naar een tabel cel, omdat de inhoud van een tabel cel wel verticaal kan worden gecentreerd.

Het voorbeeld hieronder centreert een paragraaf in een blok dat een zekere gegeven hoogte heeft. Een afzonderlijk voorbeeld toont een paragraaf die verticaal in het browser raam wordt gecentreerd, omdat het binnenin een blok is dat absoluut gepositioneerd is en even groot is als het raam.

DIV.container {

    min-height: 10em;

    display: table-cell;

    vertical-align: middle }

...

<DIV class="container">

  <P>This small paragraph...

</DIV>

Deze kleine paragraaf is verticaal gecentreerd.

CSS Valid CSS!

Bert Bos
geschreven 5 mei 2001;
laatste update datum: 2008/09/23 11:18:00 $ GMT