Als je een afbeeldingen hebt waarvan de afmetingen altijd vooraf gekend zijn is het relatief eenvoudig om deze te centreren te opzichte van het parent element. Maar wat als je de afmetingen niet vanop voorhand weet, of dat de afmetingen niet altijd hetzelfde zijn??
Met volgende CSS Snippet kan je dit probleem oplossen.

Met gekende afmetingen

HTML

<div>
<img src="afbeelding.jpg" height="100" width="100" alt="omschrijving" />
</div>

CSS

div img {
margin: 0 auto;
width: 100px;
}

Ongekende/afwijkende afmetingen

HTML

<div>
<img src="afbeelding.jpg" alt="omschrijving" />
</div>

CSS

div#wrapper {
  width: 350px;
  text-align: center;
  border: 1px solid; /* ter illustratie */
}