如何用HTML和CSS将导航栏span标签置于图标正下方？

要实现span在图标正下方的布局，核心是调整flex布局的方向，让导航链接内部的元素垂直排列并居中对齐。以下是修改后的完整代码和关键说明：

修改后的HTML #

<div class="navbar-center">
    <ul>
        <li><a href="#" class="active-link"><img src="images/home.png"><span>Home</span></a></li>
        <li><a href="#"><img src="images/network.png"><span>My Network</span></a></li>
        <li><a href="#"><img src="images/jobs.png"><span>Jobs</span></a></li>
        <li><a href="#"><img src="images/message.png"><span>Messaging</span></a></li>
        <li><a href="#"><img src="images/notification.png"><span>Notifications</span></a></li>
    </ul>
</div>

修改后的CSS #

.navbar-center ul {
    padding: 0; /* 清除默认内边距 */
}

.navbar-center ul li{
    display: inline-block;
    list-style: none;
    text-align: center; /* 确保列表项内容居中 */
}

.navbar-center ul li a{
    display: flex;
    flex-direction: column; /* 改为垂直方向排列元素 */
    align-items: center; /* 水平居中对齐图标和span */
    justify-content: center; /* 垂直方向居中（可选） */
    font-size: 14px;
    margin: 5px 8px;
    padding: 8px 5px; /* 调整内边距提升点击区域 */
    position: relative;
    text-decoration: none; /* 清除默认链接下划线 */
    color: inherit; /* 继承父元素颜色 */
}

.navbar-center ul li a span{
    font-size: 15px;
    margin-top: 4px; /* 给span和图标之间加一点间距 */
}

.navbar-center ul li a img{
    width: 30px;
}

.navbar-center ul li a::after{
    content: '';
    width: 0;
    height: 2px;
    background-color: #045be6;
    position: absolute;
    bottom: -6px; /* 调整下划线位置适配新布局 */
    transition: width 0.3s;
}

.navbar-center ul li a:hover::after,
.navbar-center ul li a.active-link::after{
    width: 100%;
}

关键修改说明 #

• 调整Flex方向：将navbar-center ul li a的flex-direction设为column，让图标和span垂直排列，替代原来的横向对齐。
• 居中对齐：通过align-items: center确保图标和span在水平方向上居中，再给li加上text-align: center，保证整个导航项内容居中。
• 移除冗余标签：删除了HTML中的<br>标签，因为flex垂直布局已经能实现换行效果，避免布局混乱。
• 优化间距与点击区域：给span添加margin-top增加和图标的间距，调整a标签的padding提升点击体验。
• 调整下划线位置：修改伪元素的bottom值，适配垂直布局后的导航链接高度。

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