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

我必須放置在正確的空間圖像，但現在我想每個圖像下添加文本。我希望第一個圖像下面有文本，例如「make order」，我希望第二個圖像下面有文字說「我們會出貨」。我不完全確定如何創建它，以便文本在圖像下，同時也使圖像放置在我想要的位置。

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您的問題，所以我們可以有下ü多方向，但基本的添加文本可以這樣做： 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; 
}