如何在HTML和CSS中在图像上方放置文本

我有一个问题，我找不到答案或者不知道如何寻找答案

我不知道如何将文本定位在图像上方，使其对齐。下图将阐明我的问题

接下来是我的HTML和CSS代码，我只提供了关于页面的HTML，但是CSS是针对整个网站的。这不是什么专业，我只是想在实践中学习。我的想法是使用这些图片作为链接（我知道怎么做）。如果已经有人问过类似的问题，我很抱歉，我尝试在这里和YouTube上搜索，但找不到解决此问题的方法。如果没有什么，我会在GIMP中编辑带有文本的图片

正文{
背景#e5fcf4；
字体系列：Arial；
}
标题{
文本对齐：居中；
}
标题导航{
显示：内联块；
}
标题导航ul{
列表样式：无；
保证金：0；
填充：0；
}
标题ulli{
浮动：左；
颜色：白色；
宽度：200px；
高度：40px；
背景色：#0d3801；
不透明度：.9；
线高：40px；
文本对齐：居中；
字体大小：20px；
}
标题ulli a{
文字装饰：无；
颜色：白色；
显示：块；
}
标题：悬停{
背景颜色：绿色；
颜色：黑色；
}
标题ul li ul li{
显示：无；
}
标题ul li：悬停ul li{
显示：块；
}
主要内容{
宽度：70%；
填充：2px；
保证金：2倍；
浮动：左；
}
副目录{
宽度：23%；
浮动：对；
填充：2px；
保证金：2倍；
边缘顶部：10px；
}
部门主要内容img{
宽度：900px；
高度：400px；
}
.清楚{
明确：两者皆有；
}
页脚{
背景色：#0d3801；
文本对齐：居中；
}
页脚img{
宽度：200px；
高度：200px；
保证金：5px；
}
页脚h2{
字号：2rem；
颜色：白色；
}
关于年龄{
宽度：450px；
高度：400px；
浮动：左；
填充物：5px；
左边距：125px；
边缘顶部：100px；
}

将每个图像包装在div中，然后在此之前添加文本

<div >
    <div style="width: 33%; float: left">
        <h3>sample title</h3>
        <a href="">
            <img class="aboutimage">
        </a>
    </div>
    ...
</div>

示例标题
...

---

根据预期结果确定“a”的位置。现在它只使图像成为链接

首先，您应该用div包装图像，并为该div添加以下样式

例如：

<div style="width:33%; float:left">Sample Text</div>

示例文本

---

试试这个。

请检查这个片段

正文{
背景#e5fcf4；
字体系列：Arial；
}
标题{
文本对齐：居中；
}
标题导航{
显示：内联块；
}
/*普拉维·科拉克*/
标题导航ul{
列表样式：无；
保证金：0；
填充：0；
}
/*德鲁吉科拉克*/
标题ulli{
浮动：左；
颜色：白色；
宽度：200px；
高度：40px；
背景色：#0d3801；
不透明度：.9；
线高：40px；
文本对齐：居中；
字体大小：20px；
}
/*特雷科拉克*/
标题ulli a{
文字装饰：无；
颜色：白色；
显示：块；
}
/*ČETVRTI KORAK*/
标题：悬停{
背景颜色：绿色；
颜色：黑色；
}
/*佩蒂·科拉克*/
标题ul li ul li{
显示：无；
}
标题ul li：悬停ul li{
显示：块；
}
主要内容{
宽度：70%；
填充：2px；
保证金：2倍；
浮动：左；
}
副目录{
宽度：23%；
浮动：对；
填充：2px；
保证金：2倍；
边缘顶部：10px；
}
部门主要内容img{
宽度：900px；
高度：400px；
}
.清楚{
明确：两者皆有；
}
页脚{
背景色：#0d3801；
文本对齐：居中；
}
页脚img{
宽度：200px；
高度：200px；
保证金：5px；
}
页脚h2{
字号：2rem；
颜色：白色；
}
关于年龄{
宽度：450px；
高度：400px；
浮动：左；
填充物：5px；
左边距：125px；
边缘顶部：100px；
}
.img a座{
位置：相对位置；
}
.img块a跨度{
位置：绝对位置；
宽度：100%；
排名：0；
左：0；
背景：rgba（0,0,0,0.5）；
填充物：5px；
字体大小：14px；
颜色：#fff；
字号：700；
文本对齐：居中；
}
.img模块img{
填充：0；
宽度：100%；
保证金：0；
高度：自动；
}
.img a座{
溢出：隐藏；
浮动：左；
宽度：钙（33.33%-20px）；
利润率：0.10px；
}

您可以使用

图

和

figcaption

使文本和图像彼此对齐

我使用了

flex

来确保一切都符合它的要求

.imageblock{
显示器：flex；
证明内容：之间的空间；
}
.图像块图{
显示：内联flex；
弯曲方向：立柱；
文本对齐：居中；
宽度：30vw；
保证金：0；
}
.图像块图*{
宽度：100%；
}

如何在这里添加文本？
如何在这里添加文本？
如何在这里添加文本？

只需在每个

a

标记上方添加一个

Hello那里

。另外请注意，div的样式由您决定，因为我不知道您的目标是什么，我只是提供一个示例@NoOorZ24谢谢这非常有效。真不敢相信这么简单的解决方案能起作用。@Matija优秀的编程都是简单的（也适用于HTML和其他创建代码的地方）。感谢您的回答，我使用了第一个答案作为解决方案，但现在我也了解了flex（需要进一步研究，这是我第一次看到它）；）