een afbeelding rechts uitlijnen met CSS HTML

Hoe kan ik een afbeelding rechts uitlijnen met CSS.

Ik wil nietdat de tekst wrap-around. Ik wil dat de rechts uitgelijnde afbeelding op zichzelf op een lijn staat.


Antwoord 1, autoriteit 100%

<img style="float: right;" alt="" src="https://example.com/image.png" />
<div style="clear: right">
   ...text...
</div>    

jsFiddle.


Antwoord 2, autoriteit 16%

Laat de afbeelding naar rechts zweven, waardoor eerstuw tekst eromheen loopt.

Wat dan ook het volgendeelement is, zet het op { clear: right; } en alles stopt met rond de afbeelding te wikkelen.


Antwoord 3, autoriteit 11%

Er zijn een paar verschillende manieren om dit te doen, maar het volgende is een kort voorbeeld van een manier.

<img src="yourimage.jpg" style="float:right" /><div style="clear:both">Your text here.</div>

Ik heb inline stijlen gebruikt voor dit voorbeeld, maar je kunt deze gemakkelijk in een stylesheet plaatsen en verwijzen naar de klasse of id.


Antwoord 4, autoriteit 5%

Om de afbeelding naar rechts te laten bewegen:

float: right;

Om de tekst niet omwikkeld te maken:

clear: right;

Voor de beste werkwijze plaatst u de css-code in uw stylesheets-bestand. Zodra u meer code toevoegt, ziet het er rommelig uit en is het moeilijk te bewerken.


Antwoord 5, autoriteit 2%

Mijn oplossing voor dit probleem was om display: inlinein te stellen op het afbeeldingselement.
Hiermee worden uw afbeelding en tekst opgesteld aan de rechterkant als u text-align: rightvan een oudercontainer.


Antwoord 6, Autoriteit 2%

img {
     display: block;
     margin-left: auto;
   }

Other episodes