align text under image using css and html

Question

i have two images that have been placed on the page 37% from the top and 25% from the left. so the css code looks like this:

.christmas-circle{ //image 1 class
    border-radius: 50%; //makes the image a circle 
    position:absolute;
    top:37%;
    left:25%;
}

.shipment-circle{ //image 2 class
    border-radius: 50%;
    position:absolute;
    top:37%;
}

this is the html code

<div class = "christmas-inst">
    <img src="christmas-circle.jpg" class="christmas-circle" style="width:256px;height:256px;"> 
    <p> First, build your desired tree</p>
</div>

<div class = "shipment-inst">
    <img src="shipment-circle.png" class="shipment-circle" style="width:256px;height:256px;"> 
    <p> Then, we'll deliver all materials</p>
</div>

i have the images placed in the right space but now i want to add text under each image. i want the first image to have text under it say for example "make the order" and i want the second image to have text under it that says "we'll ship it". i'm not exactly sure how to create it so that the text is under the images while also making the images placed in the spot i want it to be.

Answer 1

You should add html to your question so we can have more orientation but basic adding text under u can achieve like this: JSfidle Example
Example html

<div class="christmas-circle">  
  <img src="http://www.w3schools.com/html/html5.gif" alt="some_text">
  <span class="caption">Text below the image</span>
</div> 

<div class="shipment-circle">   
  <img src="http://www.w3schools.com/html/html5.gif" alt="some_text">
  <span class="caption">Text below the image</span>
</div>

Example css

.christmas-circle{ //image 1 class
    border-radius: 50%; //makes the image a circle 
    position:absolute;
    top:37%;
 }

.shipment-circle{ //image 2 class
    border-radius: 50%;
    position:absolute;
    top:37%;
 }
.caption {
    display: block;
}

Answer 2

Try this https://jsfiddle.net/L6eeejcn/

HTML

<div class="christmas-inst">
    <img src="http://placehold.it/350x150" class="christmas-circle" style="width:256px;height:256px;"> 
    <p> First, build your desired tree</p>
</div>

<div class="shimpment-inst">
    <img src="http://placehold.it/350x150" class="shipment-circle" style="width:256px;height:256px;"> 
    <p> Then, we'll deliver all materials</p>
</div>

CSS

.christmas-inst {
    position:absolute;
    top:37%;
    left:25%;
    text-align: center;
}

.shimpment-inst {
    position:absolute;
    top:37%;
    text-align: center;
}

.christmas-circle{
    border-radius: 50%; 
}

.shipment-circle{ 
    border-radius: 50%;
}