Het tijdperk dat we tabellen gebruikten om tekst, afbeeldingen e.d. uit te lijnen, ligt inmiddels ver achter ons. Horizontaal uitlijnen met CSS brengt nooit echt problemen met zich mee, maar verticaal centreren wel. Het CSS-kenmerk vertical-align is hiervoor in het leven geroepen en kun je gebruiken mits een hele hoop andere codes en CSS-hacks die je zult nodig hebben om het vereiste effect te bekomen. Niet echt handig dus. In dit artikel pakken we het heel wat eenvoudiger aan.

Tekst in een div verpakken

Stel dat we een welkomsttekst op onze website willen plaatsen. Deze tekst willen we zowel horizontaal als verticaal centreren op de pagina. We stoppen deze tekst in een p, zodat we er later eventueel nog een afbeelding of iets anders bij kunnen toevoegen zodat dit ook mee gecentreerd wordt.

<p id="center">Welkom op onze nieuwe website! 
Geniet van uw verblijf hier!</p>

We geven een achtergrondkleur en randkleur mee zodat we goed de positie van de paragraaf t.o.v. de pagina kunnen onderscheiden.

#center
{
border: 1px solid #000000;
background: #cccccc;
height: 100px;
width: 100px;

}

De paragraaf in dit voorbeeld maken we 100 pixels hoog en breed.

Positie toekennen

We gaan nu een positie toekennen. Aangezien je niet weet met welke resolutie de bezoeker de pagina bezoekt, zullen we met procenten moeten werken i.p.v. met absolute waardes.

Voeg onderstaande kenmerken toe aan je CSS-code:

 position: absolute;
top: 50%;
left: 50%;

Je merkt dat de paragraaf bijna perfect in het midden staat. De paragraaf staat echter iets meer naar onderen ten opzichte van het midden én iets meer naar rechts. Dit komt omdat de hoogte en breedte van de paragraaf natuurlijk niet wordt meegeteld in die 50%.

Positie corrigeren

Daarom gaan we de paragraaf weer iets meer naar boven plaatsen, namelijk 50% van de hoogte van de paragraaf, in dit geval 50 pixels dus. Hetzelfde gebeurt horizontaal. De paragraaf wordt 50 pixels meer naar links geplaatst.

 margin-top: -50px; /* De helft van de hoogte */
margin-left: -50px; /* De helft van de breedte */

De paragraaf is nu perfect horizontaal én verticaal gecentreerd.

Resultaat

Het resultaat kun je in dit voorbeeld bekijken.

Je kunt de paragraaf nu eender welke hoogte en breedte meegeven, zolang je maar de margin-top en margin-left vermindert met de helft van deze hoogte en breedte.

#center
{
position: absolute;
top: 50%;
left: 50%;
height: 250px;
width: 400px;
margin-top: -125px; /* De helft van de hoogte */
margin-left: -200px; /* De helft van de breedte */
border: 1px solid #000000;
background: #cccccc;
}

Op een relatief eenvoudige manier, kun je nu eender welk object op een webpagina horizontaal én verticaal centreren!