Javascript 多个div中图像上的文本

我有一个简单的CSS容器和3个不同的div，其中对齐了中心。在每个DIV中，每个图像上方都有一个图像和文本。到目前为止，这一切都很顺利

但是，我喜欢将文本放在每个可能的图像上（图像的中心）。我试着使用这个指令（），但无法使它工作。请帮忙

以下是CSS：

.containerCurve1 {
        width:90%; 
        border:0px solid black;
        text-align:center; 
        margin-left:auto; 
        margin-right:auto; 
        background-color:white; 
        border-radius: 25px; 
        padding:20px;
        max-height: 80%;
        height: 80%;
        height:80vh;
    }

.imgLevel1
{
    margin-right:15px;
    width:300px; height:260px;
    background:#B2B4B3;
    padding:12px;
    border:2px solid #FFB652;       
}

.linkImage
{
    text-decoration: none;
}

以下是HTML：

<div class="containerCurve1">
<div style='display: inline-block; vertical-align: top;'>            
    <a href="page1.html" class="linkImage">
        <span class="titlePicture">Picture 1</span><br>
        <IMG SRC="../project_img/Pic1.png" class="imgLevel1">
    </a>
</div>

<div style='display: inline-block; vertical-align: top;'>
    <a href="page2.html" class="linkImage">
        <span class="titlePicture">Picture 2</span><br>
        <IMG SRC="../project_img/Pic1.png" class="imgLevel1" >
    </a>
</div>

<div style='display: inline-block; vertical-align: top;'>           
    <a href="page3.html" class="linkImage">
        <span class="titlePicture">Picture 3</span><br>
        <IMG SRC="../project_img/Pic1.png" class="imgLevel1" >
    </a>
</div>
</div>

---

将跨度放在下方，并使用负上边距如何

.containerCurve1{
宽度：90%；
边框：0px纯黑；
文本对齐：居中；
左边距：自动；
右边距：自动；
背景色：白色；
边界半径：25px；
填充：20px；
最高高度：80%；
身高：80%；
高度：80vh；
}
.imgLevel1
{
右边距：15px；
宽度：300px；高度：260px；
背景#B2B4B3；
填充：12px；
边框：2个实心#FFB652；
}
.linkImage
{
文字装饰：无；
}
.标题图片
{
显示：块；
利润上限：-150px；
}

---

将跨度放在下方，并使用负上边距如何

.containerCurve1{
宽度：90%；
边框：0px纯黑；
文本对齐：居中；
左边距：自动；
右边距：自动；
背景色：白色；
边界半径：25px；
填充：20px；
最高高度：80%；
身高：80%；
高度：80vh；
}
.imgLevel1
{
右边距：15px；
宽度：300px；高度：260px；
背景#B2B4B3；
填充：12px；
边框：2个实心#FFB652；
}
.linkImage
{
文字装饰：无；
}
.标题图片
{
显示：块；
利润上限：-150px；
}

说明 有很多方法可以实现这种行为

一种是将包装的CSS属性

position

更改为relative，将标题的CSS属性更改为absolute。然后，使用“<代码>顶部：50% < <代码> >代码>左：50% < /代码>将标题放在包装的中间。在此之后，您将注意到图元没有完全居中，因为其自身的高度和宽度不在计算范围内。因此，我们使用属性

transform:translate（-50%，-50%）

，它使元素的一半高度向上，一半宽度向左。结果将是一个垂直和水平居中的元素

另一种可能是使用CSS属性

display:flex

。这将更容易，因为整个布局由属性处理。您可以在中查看更多信息

例子

.盒子{
利润率：10px；
显示：内联块；
}
.箱跨{
字体大小：30px；
边框：1px实心#000；
背景：#000；
颜色：#fff；
}
.盒子.位置{
位置：相对位置；
}
.box.position>span{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.box.flex{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.盒子.桌子{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
}
.谷歌{
宽度：544px；
高度：184px；
背景：url（'https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")不重复;；
}
这是居中的
这也是中心问题
最后这个

说明 有很多方法可以实现这种行为

一种是将包装的CSS属性

position

更改为relative，将标题的CSS属性更改为absolute。然后，使用“<代码>顶部：50% < <代码> >代码>左：50% < /代码>将标题放在包装的中间。在此之后，您将注意到图元没有完全居中，因为其自身的高度和宽度不在计算范围内。因此，我们使用属性

transform:translate（-50%，-50%）

，它使元素的一半高度向上，一半宽度向左。结果将是一个垂直和水平居中的元素

另一种可能是使用CSS属性

display:flex

。这将更容易，因为整个布局由属性处理。您可以在中查看更多信息

例子

.盒子{
利润率：10px；
显示：内联块；
}
.箱跨{
字体大小：30px；
边框：1px实心#000；
背景：#000；
颜色：#fff；
}
.盒子.位置{
位置：相对位置；
}
.box.position>span{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.box.flex{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.盒子.桌子{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
}
.谷歌{
宽度：544px；
高度：184px；
背景：url（'https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")不重复;；
}
这是居中的
这也是中心问题
最后这个

我可以看到它在你的整个页面上都起作用，但不知怎的，当我放入我的页面时，负上边距会把所有内容都推高。也许我做错了什么，我会继续玩下去。。。谢谢你的快速回复。我可以在你的整个页面上看到它的效果，但不知怎么的，当我把我的页面放进去的时候，负的上边距会把一切都推高。也许我做错了什么，我会继续玩下去。。。感谢您的快速回复。谢谢@Romulo。这是一个非常好的解决方案。它可以在Mozilla和Chrome上运行，但不幸的是IE11不能。