Hoe kan ik een plaatje uitlijnen met CSS

Een plaatje mooi uitlijnen naar links of rechts werd in html gedaan met align=”left” of “right”. Met CSS gaat dat op een iets andere manier, namelijk met floating. Hoe je een plaatje goed kunt uitlijnen en dit floaten standaard aan je CSS toevoegt leer je in dit artikel.

Wanneer je een plaatje toevoeg aan een paragraaf doe je dat over het algemeen op de volgende manier:

<p>
<img src="plaatje.jpg" alt="plaatje"> Lorem ipsum dolor sit amet, consectetaur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
</p>

Nu is het zo dat het plaatje gewoon boven de tekst komt te staan, of de tekst staat naast het plaatje aan de onderkant. Dat is niet zo mooi.

We gaan als eerste het plaatje een class meegeven wat je algemeen geldend kunt maken, namelijk “alignleft”. De code van het plaatje wordt dan:
<img src="plaatje.jpg" alt="plaatje" class="alignleft">
Nu gaan we de css code aanpassen. Hoe je CSS in een html-document plaatst lees je in het artikel
Importeren van stijlen.

img.alignleft {
float: left;
padding: 0 3px 3px 0;
}

Elk plaatje (img) met de class ‘alignleft’, wordt naar links uitgelijnd en krijgt tevens wat ruimte om het plaatje heen, namelijk aan de rechterkant en aan de onderkant, anders staat het plaatje tegen de tekst aan.

Hetzelfde kun je doen voor het uitlijnen naar rechts. Het plaatje krijgt dan de class ‘alignright’. De css code wordt dan:

img.alignright {
float: right;
padding: 0 0 3px 3px;
}

Het is handig om .alignright en img.alignright en .alignleft en img.alignleft als standaard op te nemen in je css code. Op die manier kun je voor ieder onderdeel dat je naar links of rechts moet uitlijnen de css code gebruiken wat voorheen met ‘align=”left”‘gedaan werd.

Gerelateerde artikelen
CSS – Hoe gebruik je id en class op de juiste manier?
Divs met ronde hoeken maken
background-position
HTML5 en CSS3, de laatste loodjes
Cursus – CSS voor beginners