Tekst rond een afbeelding verplaatsen met HTML of CSS

Wanneer u een afbeelding bij de tekst op uw webpagina opneemt, geeft de standaardstijl de afbeelding boven of onder de omringende inhoud weer, waarbij links en rechts van de afbeelding witruimte overblijft. Dit verspilt ruimte en zorgt ervoor dat de afbeelding los lijkt te staan ​​van uw tekst. Om dit op te lossen, hebt u de mogelijkheid om HyperText Markup Language (HTML) of Cascading Style Sheets (CSS) te gebruiken om de positionering van de afbeelding te specificeren zodat de tekst rond de randen van de afbeelding loopt. Gebruik HTML of CSS om tekst door uw afbeeldingen te verplaatsen, zoals u dat wilt.

HTML

Stap 1

Start het paginabestand in het teksteditorprogramma van uw computer en plaats uw cursor in de "" tag. Typ "align=" en volg dit met aanhalingstekens als volgt:

Stap 2

Voer "rechts", "links", "midden", "boven" of "onder" in na het uitlijnen om aan te geven waar uw afbeelding wordt weergegeven in verhouding tot uw tekst. Een "bovenste" uitlijning zorgt ervoor dat uw inhoud op het hoogste punt van uw afbeelding verschijnt, het "middelste" verplaatst de tekst naar het midden van de foto en de "onderste" zorgt ervoor dat de inhoud onderaan de afbeelding begint. Bovendien verplaatst een "rechter" positie uw gegevens naar de linkerkant van de afbeelding en een "linker" uitlijning plaatst de inhoud rechts van de afbeelding. Typ uw code als volgt:

Het bestand opslaan.

CSS

Stap 1

Plaats uw cursor in de "" tag en typ "style=" met een reeks aanhalingstekens voor het laatste punthaakje. Ter illustratie:

Stap 2

Typ "float:" tussen de aanhalingstekens en typ het kenmerk "left" of "right" om de uitlijning van de afbeelding een naam te geven. De waarde "links" zorgt ervoor dat uw afbeelding aan de linkerkant wordt weergegeven en verplaatst uw tekst naar rechts, terwijl het kenmerk "rechts" het tegenovergestelde doet. Bijvoorbeeld:

Sla uw document op.