如何为链接中的图片添加底部文字说明（使用语义化 HTML 和 Flex 布局）-html教程-PHP中文网

如何为链接中的图片添加底部文字说明（使用语义化 HTML 和 Flex 布局）

本文讲解如何在标签内为图片正确添加下方文字说明，避免文字与图片并排错位；核心方案是用 + 构建语义化结构，并配合现代 CSS 布局实现美观对齐。

本文讲解如何在 `` 标签内为图片正确添加下方文字说明，避免文字与图片并排错位；核心方案是用 `

` + `

` 构建语义化结构，并配合现代 css 布局实现美观对齐。

在网页开发中，常需将图片包装在链接中（如剧集封面跳转），同时为其添加标题或说明文字。但若直接在标签内并列写入和纯文本（如 Season 1），会因两者默认均为行内元素（inline） 而导致文字与图片水平对齐——看似“跳到页面顶部”，实则是被浏览器渲染在同一基线（baseline）上，造成视觉错位。

✅ 正确解法：采用语义化 HTML 结构 + 块级容器控制流
推荐使用

（图注），因为
是天然的块级元素，会自动换行置于图片下方，且具备良好的可访问性与 SEO 意义。

以下是优化后的完整代码示例：

<div class="seasons">
  <a href="https://www.php.cn/link/62d9febd7d3d606f3f673244348a0d4d" class="season-a">
    <figure>
      @@##@@
      <figcaption>Season 1</figcaption></figure></a>
  <a href="#season2" class="season-a">
    <figure>
      @@##@@
      <figcaption>Season 2</figcaption></figure></a>
</div>

对应 CSS（精简并增强兼容性）：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

.seasons {
  display: flex;
  gap: 2rem; /* 替代手动 float，更可靠 */
  justify-content: center;
  flex-wrap: wrap;
}

.season-a {
  text-decoration: none; /* 移除下划线 */
  color: inherit;
}

figure {
  margin: 0; /* 重置默认外边距 */
  text-align: center;
}

.season-img {
  width: 70%;
  border-radius: 70px;
  padding: 50px;
  display: block; /* 确保 img 不参与 inline 布局 */
  max-width: 300px;
}

figcaption {
  margin-top: 0.75rem;
  font-weight: 600;
  color: #333;
  font-size: 1.1em;
}

⚠️ 注意事项：

避免使用 float：原代码中 #season-left { float: right } 会破坏 Flex 布局逻辑，且易引发清除浮动问题；gap 或 justify-content 更简洁可控；
必须是
的直接子元素
，否则语义失效；
图片请务必设置 alt 属性，提升无障碍体验；
若需响应式适配，可在 @media 中调整 .season-img 宽度或 gap 值。

总结：用

不仅解决布局问题，更符合 HTML5 语义规范；搭配 Flex 布局替代浮动，使代码更健壮、可维护性更强。无需 JavaScript 或 hack 技巧，纯标准方案即可优雅实现“图下有文”的设计需求。