Talen

Dit is een vertaling. Hij kan fouten bevatten of verouderd zijn t.o.v. de Engelse versie. Vertaler: Saffier Verkaik

Web Style Sheets CSS tips & trucs

See also the index of all tips.

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.

Bert Bos, leider stijl-activiteiten
Copyright © 1994–2013 W3C®

Geschreven 5 mei 2001;
laatste update do 12 dec 2013 06:20:47 CET

Talen

Over de vertalingen