How can I align text directly beneath an image?

html css text justify
Andie picture Andie · Aug 4, 2009 · Viewed 328k times · Source

I used to know how to put an image on top and then justify the text below the image so that it stays within the borders of the width of the image. However, now I have no idea how to do this. How is this accomplished?

Answer

Jason picture Jason · Aug 4, 2009

Your HTML:

<div class="img-with-text">
    <img src="yourimage.jpg" alt="sometext" />
    <p>Some text</p>
</div>

If you know the width of your image, your CSS:

.img-with-text {
    text-align: justify;
    width: [width of img];
}

.img-with-text img {
    display: block;
    margin: 0 auto;
}

Otherwise your text below the image will free-flow. To prevent this, just set a width to your container.

Related questions

HTML: Changing colors of specific words in a string of text

I have the below message (slightly changed): "Enter the competition by January 30, 2011 and you could win up to $$$$ — including amazing summer trips!" I currently have: <p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;"> formatting the text …

Read More
Setting a max character length in CSS

I am making responsive website for school and my question is: How do I set a max character length of the sentences (with CSS) on my website (like 75 characters) that when I have a very large screen, the sentences wont …

Read More
Vertical Text Direction

I have been trying text to go in a vertical direction like we can do in ms-word tables but so far I have only been able to do THIS... which I am not happy with because it's a box rotated... …

Read More