如何在导航栏中的图像下放置标签？

Question

我的网站每个页面都有一个底部导航栏和 4 张图片。我现在想在图片下放置文字，但我不知道该怎么做。

我已经使用 span、div... 并且没有任何效果。

    .footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
}

#footernavbar {
    background-color: #282064;
    height: 60px;
    width: 100%;
    bottom: 0;
    position: fixed;
    float: left;
}

.imagefooternav{
    object-fit:scale-down;
}

.icon{
    position:relative;
    width:100%;
    height:60px;
}

.icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<footer class="border-top footer text-muted">

  <div id="footernavbar">
    <div class="row">

      <div class="col-xl-4"></div>
      <a class=" col-md-3 col-sm-3 col-3 col-xl-1" asp-controller="Home" asp-action="Index">
        <div class="icon">

          <img src="~/images/homepage.png" />

        </div>
      </a>
      <a class=" col-md-3 col-sm-3 col-3 col-xl-1" asp-controller="Tour" asp-action="Index">
        <div class="icon">

          <img src="~/images/calendar.png" />

        </div>
      </a>
      <a class=" col-md-3 col-sm-3 col-3 col-xl-1" href="/BuildingSite/CreateToday/">
        <div class="icon">

          <img src="~/images/pen.png" />

        </div>
      </a>
      <a class="col-md-3 col-sm-3 col-3 col-xl-1" href="/User">
        <div class="icon">
          <span>
                            <img src="~/images/user.png" />
                        </span>
          <span>
                            test
                        </span>

        </div>
      </a>
      <div class="col-xl-4"></div>
    </div>
  </div>
</footer>

目前我知道了：https://i.imgur.com/YSah00h.png

我想要的是：https://i.imgur.com/Ir5UTjf.png

（对于每张图片，例如我只为最后一张图片做）

Answer 1

试试这个例子，我在你的 CSS 代码中添加了 profileName 类

https://jsfiddle.net/becher_henchiri/s9h8of1r/3/

Answer 2

HTML: 刚刚创建了一行，其中包含您需要的图像和文本，它们都在 12 列中，它应该可以工作。

<footer class="border-top footer text-muted">

  <div id="footernavbar">
    <div class="row">

      <div class="col-xl-4"></div>
      <a class=" col-md-3 col-sm-3 col-3 col-xl-1 m-2" asp-controller="Home" asp-action="Index">
        <div class="icon">

          <img src="https://cdn2.iconfinder.com/data/icons/blue-round-amazing-icons-1/512/home-alt-512.png" />

        </div>
      </a>
      <a class=" col-md-3 col-sm-3 col-3 col-xl-1 m-2" asp-controller="Tour" asp-action="Index">
        <div class="icon">

          <img src="https://cdn2.iconfinder.com/data/icons/blue-round-amazing-icons-1/512/home-alt-512.png" />

        </div>
      </a>
      <a class=" col-md-3 col-sm-3 col-3 col-xl-1 m-2" href="/BuildingSite/CreateToday/">
        <div class="icon">

          <img src="https://cdn2.iconfinder.com/data/icons/blue-round-amazing-icons-1/512/home-alt-512.png" />

        </div>
      </a>
      <a class="col-md-3 col-sm-3 col-3 col-xl-1 m-2" href="/User">
        <div class="icon row">
          <span class="col-12 text-center">
           <img src="https://cdn2.iconfinder.com/data/icons/blue-round-amazing-icons-1/512/home-alt-512.png" />
          </span>
          <span class="col-12 text-center">
            test
          </span>

        </div>
      </a>
      <div class="col-xl-4"></div>
    </div>
  </div>
</footer>

css:

    .footer {
  position: absolute;
  bottom:0;
  width: 100%;
  white-space: nowrap;
  /* Set the fixed height of the footer here */
  height: 60px;
}

#footernavbar {
    background-color: #282064;
    height: 60px;
    width: 100%;
    bottom: 0;
    position: fixed;
    float: left;
}

.imagefooternav{
    object-fit:scale-down;
}

.icon{
    position:relative;
    width:100%;
    height:60px;
}

.icon img {
/*     position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    width: 30px;
}