如何在HTML/CSS中在图标下方添加文字

你可以通过添加CSS样式，让每个导航链接内部的元素垂直排列，具体实现如下：

核心思路 #

给底部导航的每个链接设置垂直方向的弹性布局，让图标和文字上下分布，同时调整容器样式让导航项均匀排列。

修改后的完整代码 #

<div class="bottom-bar div-only-mobile" style="position: fixed; bottom: 0; width:100%">
  <a href="Dashboard">
    <ion-icon name="home-outline" class="icon" onclick="change(this)"></ion-icon>
    Dashboard
  </a>
  <a href="Profile">
    <ion-icon name="person-outline" class="icon" onclick="change(this)"></ion-icon>
    Profile
  </a>
</div>

<style>
/* 让导航项均匀分布在底部 */
.bottom-bar {
  display: flex;
  justify-content: space-around;
  background: #fff;
  padding: 8px 0;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
}

/* 垂直排列图标和文字，居中对齐 */
.bottom-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-size: 12px;
}

/* 调整图标尺寸和与文字的间距 */
.bottom-bar .icon {
  font-size: 20px;
  margin-bottom: 4px;
}
</style>

效果说明 #

• 每个导航项的图标会自动显示在文字上方，且水平居中
• 导航项均匀分布在底部宽度内，点击区域足够大
• 可选的背景色和阴影能提升移动端导航的视觉质感

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