Hoe te bewegen tekst rond een beeld met HTML en CSS

Bewegen tekst rond een beeld met HTML en CSS Thinkstock / Comstock / Getty Images

Wanneer u een foto met de tekst op uw webpagina omvatten de standaard stijl toont de afbeelding boven of onder omringende inhoud, waardoor er witte ruimte aan de linker- en rechterkant vanDe afbeelding.Dit afval ruimte en maakt het beeld lijken onsamenhangend van uw tekst.Om dit op te lossen, heb je de optie om ofwel HyperText Markup Language (HTML) of Cascading Style Sheets (CSS) gebruiken om de plaatsing van het beeld te geven, zodat de tekst wraps rond de randen van het beeld.Gebruik HTML of CSS om tekst te bewegen rond uw afbeeldingen, zoals u verkiest.

HTML

  1. Start de pagina bestand in teksteditor programma van uw computer en de positie van uw cursor in het "& lt; img & gt;"tag.Typ "align =" en volg deze met aanhalingstekens dus:

    & lt; img src = "image.jpg" align = "" / & gt;

  2. Enter "rechts", "links", "midden", "top" of "bottom" na de align binnenkomst aan te geven waar uw foto verschijnt in verband met uw tekst.Een

    "top" alignment maakt de inhoud verschijnen op het hoogste punt van de afbeelding, de "middelste" beweegt de tekst naar het midden van de foto en de "onderkant" stuurt de inhoud vanaf de onderkant van de grafiek.Bovendien, een "recht" positie verplaatst gegevens naar de linkerkant van het beeld en een "linker" alignment plaatsen inhoud aan de rechterkant van het beeld.Typ uw code als volgt:

    & lt; img src = "image.jpg" align = "top" / & gt;

  3. Sla het bestand op.

CSS

  1. Plaats uw cursor in het "& lt; img & gt;"tag en typ "style =" met een set van aanhalingstekens voor de laatste hoek beugel.Ter illustratie:

    & lt; img src = "image.jpg" style = "" / & gt;

  2. Enter "float:" binnen de aanhalingstekens en typ de "links" of "rechts" attribuut om de uitlijning van de afbeelding te noemen."Links" waarde maakt je beeld verschijnen op de linker en beweegt de tekst naar rechts, terwijl de "juiste" attribuut doet het tegenovergestelde.Bijvoorbeeld:

    & lt; img src = "image.jpg" style = "float: right" / & gt;

  3. Sla uw document.

Resources

  • HTML Code Tutorial: HTML Align
  • Quackit: CSS Float
  • World Wide Web Consortium (W3C): vanafmet HTML + CSS
775
0
1
Html