如何在图片底部添加指定文本？求对应HTML与CSS代码

以下两种方案都可以实现文本{L U V B A G}精准显示在图片正下方的效果：

方案一：Flex布局实现（推荐） #

这种方式布局逻辑清晰，适配性更强：

HTML代码 #

<div class="image-container">
  <img src="替换为你的图片URL" alt="图片描述">
  <span class="bottom-text">{L U V B A G}</span>
</div>

CSS代码 #

.image-container {
  /* 垂直排列内部元素 */
  display: flex;
  flex-direction: column;
  /* 水平方向居中对齐，确保文本在图片正下方 */
  align-items: center;
  /* 可选：添加外边距，调整和其他元素的间距 */
  margin: 20px;
}

.bottom-text {
  /* 可选：设置文本与图片的间距 */
  margin-top: 8px;
  /* 可选：自定义文本样式，比如字体、字间距 */
  font-size: 16px;
  letter-spacing: 2px;
}

方案二：Inline-block布局实现 #

如果更习惯传统布局方式，可以用这种方案：

HTML代码 #

<div class="image-container">
  <img src="替换为你的图片URL" alt="图片描述">
  <div class="bottom-text">{L U V B A G}</div>
</div>

CSS代码 #

.image-container {
  /* 容器宽度自适应图片宽度 */
  display: inline-block;
  /* 内部元素水平居中 */
  text-align: center;
  margin: 20px;
}

.bottom-text {
  margin-top: 8px;
  font-size: 16px;
  letter-spacing: 2px;
}

两种方案的核心都是通过容器控制图片和文本的对齐方式，确保文本始终处于图片的正下方居中位置。你可以根据自己的项目布局需求选择合适的方案。

内容的提问来源于stack exchange，提问作者Joel John Noronha