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>

我将图像放在正确的空间中，但现在我想在每个图像下添加文字。我希望第一张图片下面有文字，例如＆＃34;下订单＆＃34;我希望第二张图片下面有文字，上面写着＆＃34;我们将它发送给它＃34;。我不确定如何创建它以便文本在图像下面，同时也使图像放置在我想要的位置。

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

示例css

#dest

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

2 个答案: