本文讲解如何在 <a> 标签内为图片正确添加下方文字说明，避免文字与图片并排错位；核心方案是用 <figure> + <figcaption> 构建语义化结构，并配合现代 CSS 布局实现美观对齐。
本文讲解如何在 `` 标签内为图片正确添加下方文字说明，避免文字与图片并排错位；核心方案是用 `
在网页开发中，常需将图片包装在链接中（如剧集封面跳转），同时为其添加标题或说明文字。但若直接在 <a> 标签内并列写入 <img> 和纯文本（如 Season 1），会因两者默认均为行内元素（inline） 而导致文字与图片水平对齐——看似“跳到页面顶部”，实则是被浏览器渲染在同一基线（baseline）上，造成视觉错位。
✅ 正确解法：采用语义化 HTML 结构 + 块级容器控制流
推荐使用 <figure>（图文组合容器）包裹 <img> 和 <figcaption>（图注），因为 <figcaption> 是天然的块级元素，会自动换行置于图片下方，且具备良好的可访问性与 SEO 意义。
以下是优化后的完整代码示例：
<div class="seasons">
<a href="https://www.php.cn/link/62d9febd7d3d606f3f673244348a0d4d" class="season-a">
<figure>
<img src="friends-season1.webp" alt="Friends Season 1 official cover" class="season-img" id="season-left">
<figcaption>Season 1</figcaption>
</figure>
</a>
<a href="#season2" class="season-a">
<figure>
<img src="friends-season2.webp" alt="Friends Season 2 official cover" class="season-img" id="season-right">
<figcaption>Season 2</figcaption>
</figure>
</a>
</div>对应 CSS（精简并增强兼容性）：
.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 更简洁可控；
- <figcaption> 必须是 <figure> 的直接子元素，否则语义失效；
- 图片请务必设置 alt 属性，提升无障碍体验；
- 若需响应式适配，可在 @media 中调整 .season-img 宽度或 gap 值。
总结：用 <figure> + <figcaption> 不仅解决布局问题，更符合 HTML5 语义规范；搭配 Flex 布局替代浮动，使代码更健壮、可维护性更强。无需 JavaScript 或 hack 技巧，纯标准方案即可优雅实现“图下有文”的设计需求。
