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

我将图片放在右边 space 但现在我想在每张图片下添加文字。我希望第一张图片下面有文字，例如 "make the order"，我希望第二张图片下面有文字 "we'll ship it"。我不确定如何创建它，以便文本位于图像下方，同时将图像放置在我想要的位置。

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

使用 css 和 html 对齐图像下方的文本

align text under image using css and html

html

css

text

image

alignment