CODEWITHSUNDEEP
htmlimagetext
Kouu_Tori
Kouu_Tori

Reputation: 25

Text underneath an image

So what I have in an image of a can. What I want is, in HTML, is to have text appear directly under this can. There is other text to the left and under the can, in regular

form.

This is what I have:

<img src="URL" alt=" align="right" border="0px">

<p class="MsoNormal" style="margin-bottom: 6pt;"><span style="font-size: 20.5pt; font-family: Helvetica, sans-serif;"><span style="font-weight: bold; color: rgb(0, 0, 205);">(header)</span></span></p>

<p class="MsoNormal" style="margin-bottom: 12pt;"><span style="font-size: 14pt;"><span style="font-family: Helvetica, sans-serif; color: rgb(51, 51, 51); font-size: 14pt;">(paragraph)</span></span></p>

The header and paragraph here are content relating to the can itself. What I need is text directly underneath that can. Thank you.

Upvotes: 0

Views: 275

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201678

In HTML, it seems that the only way to achieve the result is to use a table, replacing the img element e.g. by

<table align=right>
<tr><td><img src="URL" alt="...">
<tr><td>Text under the image
</table>

Using CSS, other alternatives are possible, too.

Upvotes: 0

Whistletoe
Whistletoe

Reputation: 573

Put your image and its accompanying text inside for example a div-element.

<div class="img-wrapper">
    <img src="" alt="" />
    <p class="img-desc">(Image caption)</p>
</div>

Then set your styles:

<style>
    .img-wrapper {
        float: right;
        margin: 0 0 0.5em 1em;
    }
    img {
        display: block;
        margin: 0 auto;
    }
    .img-desc { text-align: center; }
</style>

You should really avoid setting styles "inline" in each element. That makes the code harder to maintain. You do not need to use those span-elements, just refer to classes on the p-elements to set all the styling for the text.

Upvotes: 2

Related Questions