Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Inhoud onderdeel: Introductie afbeeldingen | Opnemen afbeelding | Rand om afbeelding | Verticaal uitlijnen afbeelding | Horizontaal uitlijnen afbeelding | Ruimte rond de afbeelding | Omschrijving in tooltip | Speciale functie afbeelding | Image maps | Client-side image maps | Voorbeelden image maps | Tooltips voor image maps

Gerelateerde elementen: AREA | IMG | MAP

Verticaal uitlijnen afbeelding

Het IMG element is een zogenaamd inline element. Een afbeelding en de omringende tekst kunnen daardoor samen op één regel voorkomen. De hoogte van deze regel wordt bepaald door het hoogste onderdeel. Vaak zal dat de afbeelding zijn.
Standaard wordt de onderkant van de afbeelding op één lijn geplaatst met de onderkant van de tekst. Met het ALIGN attribuut en de waarden "top", "middle" en "bottom" kun je zelf bepalen hoe de afbeelding op de regel in verticale richting uitgelijnd wordt ten opzichte van de tekst.

<IMG SRC="gezicht.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125" ALIGN="top">

ALIGN="top"

ALIGN="middle"

ALIGN="bottom"

Met het ALIGN attribuut bepaal je alleen de uitlijning van de afbeelding ten opzichte van de tekst die op dezelfde regel staat. Resterende tekst wordt zoals gebruikelijk op de volgende regel(s) geplaatst.

Als na de afbeelding onvoldoende ruimte is op de regel om alle tekst te plaatsen, dan wordt de resterende tekst zoals gebruikelijk op de volgende regel(s) onder de afbeelding geplaatst.

Wanneer je meer regels tekst naast de afbeelding wilt plaatsen, dan moet je met de waarden voor de horizontale uitlijning een zwevende afbeelding maken.

De uitlijning van de afbeelding in verticale richting kun je ook vastleggen door met behulp van de vertical-align eigenschap een stijl te definiëren. In het volgende voorbeeld is met een inline stijl vastgelegd dat de bovenkant van de afbeelding uitgelijnd moet worden met de bovenkant van de tekst.

<P><IMG SRC="gezicht.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125" STYLE="vertical-align: top;"> top</P>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Vervolg: Horizontaal uitlijnen afbeelding

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 5 december 2004