如何实现<a>标签内图片下方显示文字？当前文字跳转至页首

你的问题核心有两个：

• 空的<a>标签href属性会默认触发跳转至页面顶部
• 父容器使用flex布局后，子元素的float属性完全失效，导致文字无法正常显示在图片下方

修正方案： #

1. 解决跳转问题：把<a>标签的空href替换成javascript:void(0)（后续如果需要添加实际跳转链接，直接替换为对应URL即可）
2. 修正布局：给每个<a>标签设置垂直方向的flex布局，让文字自动排在图片下方，同时移除无效的float属性

修改后的代码： #

CSS

.seasons{
   display: flex;  
   gap: 20px; /* 给两个卡片之间添加间距，可选优化 */
}

.season-a {
    display: flex;
    flex-direction: column; /* 让内部元素垂直排列 */
    align-items: center; /* 内容居中显示，可选优化 */
    text-decoration: none; /* 去掉链接下划线，可选优化 */
    color: inherit; /* 继承默认文字颜色，可选优化 */
}

.season-img{
    width: 70%;
    border-radius: 70px;
    padding: 50px;
}

/* 移除原有的float样式，flex布局下float完全无效 */

HTML

<div class="seasons">
    <a href="javascript:void(0)" class="season-a">
        <img src="friends-season1.webp" alt="season 1" class="season-img">
        Season 1
    </a>
    <a href="javascript:void(0)" class="season-a">
        <img src="friends-season2.webp" alt="season 2" class="season-img">
        Season 2
    </a>
</div>

关键说明： #

• flex-direction: column让<a>标签内的图片和文字自动垂直排列，文字自然出现在图片下方
• javascript:void(0)直接阻止了空链接默认的页面跳转行为
• 移除float属性是因为在flex容器中，float不会产生任何预期的布局效果，反而会干扰flex的正常排列

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