HTML Afbeeldingen

HTML <img> align attribuut

  • Het align attribuut is verouderd, er wordt aangeraden deze te vermijden.
  • Het align attribuut specificeert de horizontale en verticale uitlijning van een afbeelding t.o.v. de omliggende elementen.
  • Het <img> element is een inline element (het voegt geen nieuwe lijn toe), wat wil zeggen dat er tekst en andere elementen rond kunnen worden geplaatst.
    Daarom is het soms nuttig de uitlijning te specificeren.

Attribuut voorbeeld

<html>
<body>
<img src="html-totaal.png" align="middle">
<img src="html-totaal.png" align="top">
<img src="html-totaal.png" align="bottom">
</body>
</html>
in het midden   uitgelijnd
bovenaan  uitgelijnd
onderaan    uitgelijnd

naar boven 

Verschil HTML - XHTML

Het align attribuut van het img element is verouderd en wordt NIET ondersteunt in HTML 4.01 Strict / XHTML 1.0 Strict DTD.

nota

Niet elke browser geeft de mogelijkheden op dezelfde manier weer, in de browser van uw bezoeker kan de pagina er dus even anders uitzien !

Als bij gebruik van één van de mogelijkheden voor de verticale uitlijning de na de afbeelding volgende inline inhoud langer is dan naast de afbeelding op één regel past, dan wordt de resterende inhoud op de volgende regel(s) onder de afbeelding geplaatst !

Bij het gebruik van de mogelijkheden voor de horizontale uitlijning worden naast de afbeelding zoveel regels geplaatst als de hoogte van de afbeelding toelaat. De volgende regels lopen ook onder de afbeelding door !

Attribuut waarde

Waarde Beschrijving
left De afbeelding wordt op de eerste open ruimte aan de linker kantlijn geplaatst en de overige inhoud wordt langs de rechterzijde van de afbeelding uitgelijnd.
right De afbeelding wordt op de eerste open ruimte aan de rechter kantlijn geplaatst en de overige inhoud wordt links daarvan langs de linker kantlijn uitgelijnd.
middle De basislijn van de regel wordt in lijn geplaatst met het midden van de afbeelding.
top De bovenkant van het grootste item op de regel (dat kan zowel een letter zijn als andere inline inhoud, bijvoorbeeld een tweede afbeelding) wordt in lijn geplaatst met de bovenzijde van de afbeelding.
bottom De basislijn van de regel wordt in lijn geplaatst met de onderzijde van de afbeelding (dit is de standaardwaarde).

naar boven 

Opbouw

<img src="url" align="waarde"> In HTML
<img src="url" align="waarde" /> In XHTML
tip

Maak gebruik van CSS om de uitlijning van afbeeldingen te bepalen !

  Syntaxis: <img style="float:right" />

Browser ondersteuning

Internet Explorer Firefox Chrome Opera Safari

  • Het <img> align attribuut wordt ondersteunt in de bekende browsers.
naar boven naar boven naar border attribuut
naar boven naar het border attribuut