如何在htmlcss中的圖示下方添加文本

我想在我的網站中的這些圖示下方顯示文本。有人可以指導我怎么做嗎

<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>

uj5u.com熱心網友回復：

做到這一點的最好方法，或者至少我如何做到這一點，是使用 CSS 定位。請注意，我將每個文本和按鈕都設定為絕對位置，然后將它們定位在外部容器中。

<div class="bottom-bar div-only-mobile" style="height:100%, width:100%">
  <a href="Dashboard" style="position:absolute, top: 30%, left: 30%">Dashboard</a>
  <a style="position: absolute, top: 40%, left:30%"><ion-icon name="home-outline" class="icon" onclick="change(this)"></ion-icon></a>
  <a href="Profile" style="position:absolute, top:30%, right:30%">Profile</a>
  <a style="position:absolute, top: 40%, right:30%"><ion-icon name="person-outline" class="icon" onclick="change(this)"></ion-icon></a>
</div>

希望這可以幫助！

uj5u.com熱心網友回復：

使用 flex 和 direction 是解決方案。請注意，我在這里使用了 fontawesome 圖示。您可以更換它們。

.link-item {
  display: flex;
  flex-direction: column;
  align-items: center
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="bottom-bar div-only-mobile" style="position: fixed; bottom: 0; width:100%">
  <a class="link-item" href="Dashboard">
    <i class="fa-solid fa-user"></i>
    <span>Dashboard</span>
  </a>
  <a class="link-item" href="Profile">
    <i class="fa-solid fa-gauge"></i>
    <span>Profile</span>
  </a>
</div>

uj5u.com熱心網友回復：

你可以做這樣的事情。將每對 a、ion-icon 和 text 包裝在一個 ion-item 中，然后在其中添加一個 ion-label。我還在每個 a 標簽中的文本周圍添加了一個 div。也許你只是需要那個。

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

uj5u.com熱心網友回復：

您可以使用 css ::after 將文本放在圖示下方，只需更改一點代碼即可作業

.icon{
    position:relative;
    margin:0px 20px;
}

.icon::after{
    content:attr("data-name");
    position:absolute;
    top:100%;
    left:0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<div>
  <a href="Dashboard">
    <i class="fas fa-dashboard icon" name="home-outline" data-name="DashBoard"onclick="change(this)">
    </i></a>
  <a href="Profile">
    <i class="fas fa-user icon" name="person-outline" data-name="Profile">
    </i></a>
</div>

標籤：htmlcss反应灵敏

上一篇：如何在打字稿中為CSS類宣告型別？

下一篇：將h1內容保留在div中