Het uitlijnen van figuren gebeurde vroeger simpelweg door de attributen align en valign in de -tag toe te passen. Dit was echter geen correcte manier van werken. Het uitlijnen van een afbeelding is iets dat te maken heeft met opmaak. Opmaak moeten we regelen met CSS.

Horizontale uitlijning

We maken eerst en vooral een class aan om een afbeelding links en rechts uit te lijnen. Vroeger moesten we een tabel met 2 cellen aanmaken wanneer we aan de ene kant een afbeelding wilden tonen en aan de andere kant tekst. Met deze code is dat niet meer nodig: meteen een semantische methode én minder HTML-code:

img.links {
float: left;
margin: 2px 10px 2px 0px;
}

De uitlijning (float) wordt links ingesteld. Aan de linkerkant wordt de marge op 0 gezet. Aan de rechterkant komt een marge van 10 pixels zodat de tekst die naast de afbeelding komt niet tegen de rand van de afbeelding wordt geplakt. Aan de boven- en onderkant wordt een marge van 2 pixels voorzien. Uiteraard kun je deze marges aanpassen naar je eigen wensen.

Op dezelfde manier definiëren we een class om een figuur aan de rechterkant uit te lijnen:

img.rechts {
float: right;
margin: 2px 0px 2px 10px;
}

Het enige dat je nu nog hoeft te doen is de class koppelen aan je figuur.

<img src="/figuur.jpg" alt="Figuur" class="links" />

Verticale uitlijning

We hebben nu de horizontale uitlijning besproken, maar we kunnen ook de verticale uitlijning opgeven met CSS. Hiervoor gebruiken we het kenmerk vertical-align. Dit kenmerk kan verschillende waarden bevatten, namelijk baseline, bottom, middle en top.

Hieronder zie je een voorbeeld van de verschillende mogelijkheden: