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

【问题标题】：align text under image using css and html使用 css 和 html 对齐图像下的文本
【发布时间】：2016-02-08 20:17:27
【问题描述】：

我有两张图片被放置在页面上距顶部 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>

我将图像放置在正确的空间中，但现在我想在每个图像下添加文本。我希望第一张图片下面有文字，例如“下订单”，我希望第二张图片下面有文字，上面写着“我们会发货”。我不完全确定如何创建它，以便文本位于图像下方，同时还将图像放置在我想要的位置。

【问题讨论】：

用 html 代码编辑了我的帖子
这不是 CSS cmets 的正确语法。试试 /* */

标签： html css image text alignment

【解决方案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%;
}

【讨论】：

【解决方案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;
}

【讨论】：