Voor ondersteuning in HTML5 moet u een stijlkenmerk gebruiken met de waarde text-align: midden binnen een element op blokniveau; zoals een -tags.
Voorbeeld HTML-code
Tip: het toevoegen van een inline-stijl zoals hierboven weergegeven, mag slechts één keer worden gedaan, als u meerdere afbeeldingen wilt centreren, moet u de onderstaande suggestie gebruiken en een CSS-klasse maken om overtollige code te verminderen en uw webpagina te versnellen.
Voorbeeld van beeldcentrum met bovenstaande code
Converteren naar een element op blokniveau
Een manier waarop u afbeeldingen correct kunt centreren, is het definiëren van de element als een element op blokniveau. Voeg hiertoe een regel toe aan de kop van uw pagina (weergegeven in het volgende voorbeeld) of een gekoppeld extern CSS-bestand.
Voorbeeld HTML-code
.centerImage {text-align: center; display: block; }
Met deze code kunt u de klasse centerImage toepassen op een tag zonder het te moeten nestelen in een element op blokniveau. Deze methode werkt voor meerdere afbeeldingen.
Voorbeeld gecentreerde beeldcode
De tags gebruiken
U kunt een afbeelding centreren door de tag in de -tags. Deze actie centreert die, en alleen dat, foto op de webpagina. Opgemerkt moet worden dat deze methode is gedeprecieerd in HTML5 en niet altijd in alle browsers zal werken. We raden u aan deze methode alleen te gebruiken als geen van de andere hierboven genoemde suggesties werken waar u een afbeelding probeert te centreren.