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.

Een plaatje in CSS zonder float

Een plaatje in CSS zonder float

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.

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.

Float left, links uitlijnen in CSS

Float left, links uitlijnen in CSS

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;
}
Float right, rechts uitlijnen in CSS

Float right, rechts uitlijnen in CSS

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.

Wil of heb jij ook een website?

  • Krijg elke dinsdag tips en ideeën voor je website
  • Ontvang het ‘Het Complete Blog Ideeën boek‘ helemaal voor niks
  • Iedere week een update van nieuwe artikelen op mijn website

Meld je ook aan!




3 Reacties

Voeg toe →

  1. Alleen ff die “>” weghalen tussen “plaatje” class=”

  2. bedankt kopjekoffie!

  3. Hoi Bjorn, ik mis alleen een manier om de image uit te lijnen zonder dat de tekst wrapt..heb ik nodig 😉

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *