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
• Centreren van een blok tekst of een afbeelding
• Verticaal centreren van een blok of een afbeelding

In recente implementaties van CSS kunt u ook functies van niveau 3 gebruiken, wat het centreren van absoluut gepositioneerde elementen mogelijk maakt:

• Verticaal centreren in niveau 3
• Verticaal en horizontaal centreren in niveau 3
• Centreren in het viewport in niveau 3

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:

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 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="...">

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>

Verticaal centreren in CSS niveau 3

CSS niveau 3 biedt andere mogelijkheden. Op dit moment (2014) wordt er nog steeds gediscussieerd over een goede manier om blokken verticaal te centreren zonder absolute positionering (omdat die overlappende tekst kan veroorzaken). Maar als u weet dat overlappende tekst geen probleem is in uw document, kunt u de 'transform'-eigenschap gebruiken om een absoluut gepositioneerd element te centreren. Bijvoorbeeld:

Voor een document dat er zo uitziet:

<div class=container3>
  <p>Deze alinea…
</div>

ziet het style-sheet er als volgt uit:

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

De essentiële regels zijn:

1. Maak de container relatief gepositioneerd. Dat geeft aan dat het een container voor absoluut gepositioneerde elementen is.
2. Maak het element zelf absoluut gepositioneerd.
3. Plaats het halverwege de container met 'top: 50%'. (Merk op dat 50%' hier betekent: 50% van de hoogte van de container.)
4. Gebruik een translatie om het element omhoog te schuiven met de helft van zijn eigen hoogte. (De '50%' in 'translate(0, -50%)' verwijst naar de hoogte van het element zelf.)

Verticaal en horizontaal centreren in CSS niveau 3

We kunnen de methode uitbreiden om tegelijkertijd horizontaal en verticaal te centreren.

Een bij-effect van het absoluut-gepositioneerd maken van de alinea is dat hij dan niet breder is dan nodig (tenzij we een expliciete 'width' geven, natuurlijk). In het voorbeeld hieronder is dat precies wat we willen: We centreren een alinea met slechts één woord ("Gecentreerd!”), dus de breedte van de alinea moet precies de breedte van dat woord zijn.

De gele achtergrond is om te laten zien dat de alinea inderdaad niet breder is dan zijn inhoud. We gaan uit van dezelfde opmaak als hierboven:

<div class=container4>
  <p>Gecentreerd!
</div>

Het style-sheet is vergelijkbaar met het eerdere voorbeeld voor wat betreft de verticale centrering. Maar we verschuiven het element nu ook horizontaal naar halverwege de container, met 'left: 50%', en tegelijkertijd naar links met de helft van zijn eigen breedte m.b.v. de translatie:

div.container4 {
    height: 10em;
    position: relative }
div.container4 p {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

Het volgende voorbeeld legt uit waarom 'margin-right: -50%' nodig is.

Centreren in het viewport in CSS niveau 3

De standaard container voor absoluut gepositioneerde elementen is het viewport. (In het geval van een browser betekent dat het venster van de browser.) Dus centreren in het viewport is erg simpel. Hier is een compleet voorbeeld. (Dit voorbeeld gebruikt de syntax van HTML5.)

<html>
  <style>
    body {
        background: white }
    section {
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) }
  </style>
  <section>
    <h1>Nicely centered</h1>
    <p>This text block is vertically centered.
    <p>Horizontally, too, if the window is wide enough.
  </section>

Je kunt het resultaat zien in een afzonderlijk document.

De 'margin-right: -50%' is nodig om de 'left: 50%' te compenseren. Die regel met 'left' vermindert de beschikbare breedte voor het element met 50%. De formatteerder zal dus proberen tekstregels te maken die niet langer zijn dan de helft van de breedte van de container. Door te zeggen dat de rechter kantlijn eenzelfde afstand verder naar rechts ligt, is de maximale regellengte weer gelijk aan de breedte van de container.

Probeer maar eens het venster van grootte te veranderen: U zult zien dat elke zin één regel is als het venster breed genoeg is. Alleen als het venster te smal is voor de hele zin zal de zin over verscheidene regels worden afgebroken. Als u de 'margin-right: -50%' verwijdert en het venster weer vergroot/verkleint zult u zien dat de zinnen al afgebroken worden als het venster nog twee keer zo breed is als de zinnen.

(Het gebruik van 'translate' voor centeren in het viewport is voor het eerst voorgesteld door “Charlie” in een antwoord op Stack Overflow.)

Geschreven 5 mei 2001;
laatste update