Hoewel het niet per se moeilijk hoeft te zijn, zijn centrerende afbeeldingen op uw webpagina's misschien meer betrokken dan u denkt. De belangrijkste reden is dat de tag is een inline-element, dus het gedraagt ​​zich anders dan elementen op blokniveau. Sommige benaderingen gebruiken HTML; anderen gebruiken CSS, en sommige worden als "gepaster" beschouwd dan andere omdat ze niet verouderd zijn. Om door te gaan, selecteert u een methode uit de onderstaande lijst en volgt u de instructies.

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.

Voorbeeld HTML-code