выровнять текст под изображение с помощью css и html

Question

У меня есть два изображения, которые были размещены на странице 37% сверху и 25% слева. так что код CSS выглядит следующим образом:

.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%; 
} 

это HTML-код

<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> 

У меня есть изображения, размещенные в нужном пространстве, но теперь я хочу, чтобы добавить текст под каждым изображением. Я хочу, чтобы первое изображение имело текст под ним, например «сделайте заказ», и я хочу, чтобы на втором изображении был текст под ним, в котором говорится «мы его отправим». я не совсем уверен, как создать его так, чтобы текст находился под изображениями, а также создавал изображения в месте, которое я хочу.

Answer 1

Попробуйте 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%; 
} 

Answer 2

Вы должны добавить HTML на свой вопрос, чтобы мы могли иметь больше ориентацию, но основной добавление текста при U может достичь следующего: JSfidle 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> 

Пример 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; 
}