Vroeger wist ik hoe ik een afbeelding bovenaan moest plaatsen en vervolgens de tekst onder de afbeelding moest uitvullen, zodat deze binnen de grenzen van de breedte van de afbeelding blijft. Nu heb ik echter geen idee hoe ik dit moet doen. Hoe wordt dit bereikt?
Antwoord 1, autoriteit 100%
Uw HTML:
<div class="img-with-text">
<img src="yourimage.jpg" alt="sometext" />
<p>Some text</p>
</div>
Als u de breedte van uw afbeelding weet, uw CSS:
.img-with-text {
text-align: justify;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
Anders zal uw tekst onder de afbeelding vrij stromen. Om dit te voorkomen, stelt u gewoon een breedte in voor uw container.
Antwoord 2, autoriteit 86%
U kunt HTML5 <figcaption>gebruiken:
<figure>
<img src="img.jpg" alt="my img"/>
<figcaption> Your text </figcaption>
</figure>
Antwoord 3, autoriteit 8%
Hiermee centreert u de “A” onder de afbeelding:
<div style="text-align:center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/opentoselect.gif" />
<br />
A
</div>
Dat is ASP.Net en het zou de HTML weergeven als:
<div style="text-align:center">
<img id="Image1" src="Images/opentoselect.gif" style="border-width:0px;" />
<br />
A
</div>
Antwoord 4, autoriteit 6%
Om de tekst te kunnen uitvullen, moet u de breedte van de afbeelding weten. Je kunt gewoon de normale breedte van de afbeelding gebruiken, of een andere breedte gebruiken, maar IE 6 kan chagrijnig worden en niet schalen.
Dit is wat je nodig hebt:
<style type="text/css">
#container { width: 100px; //whatever width you want }
#image {width: 100%; //fill up whole div }
#text { text-align: justify; }
</style>
<div id="container">
<img src="" id="image" />
<p id="text">oooh look! text!</p>
</div>
Antwoord 5
Ik ben geen expert in HTML, maar dit is wat voor mij werkte:
<div class="img-with-text-below">
<img src="your-image.jpg" alt="alt-text" />
<p><center>Your text</center></p>
</div>