Html 如何在图像底部放置文本（类似宝丽来图像）

我正在努力制作像这样的宝丽来照片。其中图像的底部有一个文本。我尝试了每一条指令，但都失败了

这是我的HTML代码

<div id="Places" class="gallery">
        <ul>
            <li>
                <a href="https://www.w3schools.com/css/css_image_gallery.asp" target="_blank">
                    <img src="images/babot1.jpg" alt="bobat1">
                </a>
            </li>
            <li>
                <a href="https://www.w3schools.com/css/css_image_gallery.asp" target="_blank">
                    <img src="images/lhouse1.jpg" alt="bobat1">
                </a>
            </li>
            <li>
                <a href="https://www.youtube.com/playlist?list=PL6n9fhu94yhVm6S8I2xd6nYz2ZORd7X2v" target="_blank">
                    <img src="images/babot1.jpg" alt="bobat1">
                </a>
            </li>
        </ul>
</div>

编辑1： 这是我得到的样品照片。

---

有一个html标记，可以执行您想要的操作：

这是我的形象

将文本放在div中，将其定位为绝对值，并将z索引设置为90或更高

<div id="txt">This is a title</div>

<style>
    position: absolute;
    z-index: 99;
</style>

这是一个标题
位置：绝对位置；
z指数：99；

+

就是为此而设计的

为了让它看起来像宝丽来，我会这样做：

图{
边框：1px实心#F5；
边界半径：5px；
填充：10px；
显示：内联块；
盒影：0 4px 5px-2px rgba（0,0,0,2），0 7px 10px 1px rgba（0,0,0,14），0 2px 16px 1px rgba（0,0,0,12）；
}
图img{
显示：块；
}
菲卡普顿{
显示：块；
填充：1雷姆0.5雷姆；
颜色：#777；
}

这将是一个标题
这将是另一个标题

它是如何失败的？深入了解更多细节。不要只转储代码。@zero298文本超出图片范围。我会编辑帖子并添加一些照片。这一定是我见过的最懒的答案。结果也是一样的！那工作做得很好。你能解释一下我做错了什么，这个代码和我的有什么不同吗？如果不是麻烦的话。你在漂浮你的图像。将它们放在容器的左侧，并告诉其余内容围绕它们流动。为了更好地理解浮动，您的

<div id="txt">This is a title</div>

<style>
    position: absolute;
    z-index: 99;
</style>