How do you place text under a image?

If your images require a caption, it might be best to use the figure and figcaption elements instead of a div.

I removed the margin from your images and the caption fits nicely underneath each image, you can see an example of how I've tackled the problem here: http://codepen.io/lilianab/pen/KrRLBq

Hope that helps somewhat :)

If you're laying out photos and want text under each of them, I'd suggest making an unordered list, and inserting into each list item element the picture and a paragraph text. So it'd look like this:

<ul>
<li><img src="beginnermensimage.jpg"><p>Beginner mens image</p></li>
<li><img src="advancedmensimage.jpg"><p>Advanced mens image</p></li>
</ul>

It should automatically put the text below

Here's a reference video if needed

https://teamtreehouse.com/library/how-to-make-a-website/creating-html-content/add-image-gallery-content

There's also another video in that track of videos that shows you how to style it further and make it look proper.

I'm just starting out myself so please if someone with more experience knows the better practice on how to do this chime in!

But you could just create a give a span tag a class and then control it in your CSS like so right?

<div class="image-warp"> <img src="url of image"> <span class="image-caption">Your Text Here"</span> </div>

Then in your css style sheet just call on the class and manipulate it as you like

.image-wrap { display: block; font-size: 2em; } or whatever else you would like to do.

Thanks for all your help. I found the figure and figcaption method worked well. Is there a way when using this method to span the text on 3 separate lines? I want to say "Beginner Program" on one line and on the second line under it "For men" and under that "$0.99". I am having trouble fitting more than one line of text under the image. Thanks in advance

Thanks Liliana, that worked perfectly.

I have come across another issue while making my page responsive. I have it layed it out so all six boxes have 3 lines of text underneath the image. On the last two boxes I have a added 2 line paragraph on each of the them. The problem is as I make the page larger rather than two boxes be in a line it is now 3. This caused the 4th box to be slightly lower than the other two images next to it. Is there a way to make the fourth box and text lower down the page for one for one of my breakpoints? Thanks on advance. I have attached my code below- HTML5 <figure id="beginner"> <img src="beginnermensimage.jpg"> <figcaption><p class="program">Beginner Program</p><p class="info">For Men</p><p class="price">$0.99</p></figcaption> </figure> <figure id="advanced"><img src="advancedmensimage.jpg"> <figcaption><p class="program">Advanced Program</p><p class="info">For Men</p><p class="price">$0.99</p></figcaption> </figure> <figure id="bundle"><img src="beginnerwomensimage.jpg"> <figcaption><p class="program">Beginner Program</p><p class="info">For Women</p><p class="price">$0.99</p></figcaption> </figure> <figure id="beginner2"><img src="advancedwomensimage.jpg"> <figcaption><p class="program">Advanced Program</p><p class="info">For Women</p><p class="price">$0.99</p></figcaption> </figure> <figure id="advanced2"><img src="bundlemensimage.jpg"> <figcaption><p class="program">Beach Body Abs Bundle</p><p class="info">For Men</p><p class="price">$1.45</p> <p class="description">Includes Beginner and Advanced Beach Body Abs 12 Week Programs</p> </figcaption> </figure> <figure id="bundle2"><img src="bundlewomensimage.jpg"> <figcaption><p class="program">Beach Body Abs Bundle</p><p class="info">For Women</p><p class="price">$1.45</p> <p class="description">Includes Beginner and Advanced Beach Body Abs 12 Week Programs</p></figcaption> </figure>

CSS img {
max-width: 110%; margin: 10px 10px -95px 0px;
}

figure {
height: 250px; width: 250px; margin: 20px; display: inline-block; }

figcaption { padding-top: 50px;

}

p.program { font-weight: bold; font-size: 23px; margin: 45px 0px -26px 12.5px;

}

p.info { font-weight: bold; font-size: 23px; color: Black; margin: 20px 0px -26px 0px;
text-align:center;

} p.price {
font-size: 25px; color: red; font-weight: bold; text-align: center; }

p.description { font-size: 15px; color: black; margin: -20px 0px 30px 0px; text-align:center; }