如何通过CSS将<a>标签内的文本居中显示在图片之上

我需要将文本居中显示在图片上，请问该如何实现？以下是我的HTML代码：

<ul class="collection">
    <li><a href="#"><img class="col-img1" src="images/bouquets.jpeg" alt=""><p class="col-text">Букети</p></a></li>
    <li><a href="#"><img class="col-img2" src="images/natural_flowers.jpeg" alt=""><p class="col-text">Живі квіти</p></a></li>
    <li><a href="#"><img class="col-img3" src="images/own_bouquet.png" alt=""><p class="col-text">"Свій" букет</p></a></li>
</ul>

当前效果：文本位于图片下方，未叠加在图片上；期望效果：文本居中叠加显示在图片表面（水平、垂直均居中）

解决方案 #

通过CSS定位与弹性布局组合即可实现需求，具体实现步骤如下：

1. 优化HTML结构（可选，统一样式控制） #

给每个包含图片和文本的<a>标签添加统一类名，方便批量设置样式：

<ul class="collection">
    <li><a href="#" class="img-text-container"><img class="col-img" src="images/bouquets.jpeg" alt=""><p class="col-text">Букети</p></a></li>
    <li><a href="#" class="img-text-container"><img class="col-img" src="images/natural_flowers.jpeg" alt=""><p class="col-text">Живі квіти</p></a></li>
    <li><a href="#" class="img-text-container"><img class="col-img" src="images/own_bouquet.png" alt=""><p class="col-text">"Свій" букет</p></a></li>
</ul>

2. 添加核心CSS样式 #

/* 容器设置为相对定位，作为内部绝对定位元素的参照 */
.img-text-container {
    position: relative;
    display: inline-block; /* 让容器宽度自适应图片尺寸 */
}

/* 图片设置为块级元素，消除底部默认留白 */
.col-img {
    display: block;
    width: 100%; /* 可根据需求自定义宽度 */
    height: auto;
}

/* 文本设置为绝对定位，实现居中覆盖 */
.col-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 通过平移实现完美居中 */
    margin: 0;
    color: #ffffff; /* 根据图片底色调整文本颜色，提升可读性 */
    font-size: 1.2rem;
    /* 可选：添加文本阴影增强辨识度 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

关键逻辑说明 #

• position: relative：给容器设置相对定位，确保内部绝对定位的文本以容器为基准定位。
• position: absolute + top:50% + left:50%：将文本的左上角移动至容器中心位置。
• transform: translate(-50%, -50%)：通过平移文本自身宽高的50%，实现文本整体的完美居中。
• 若需要文本固定在图片底部居中，可将top:50%改为bottom: 10px，并把transform调整为translateX(-50%)即可。

内容的提问来源于stack exchange，提问作者Natusya Zira