Question

我的网站每个页面都有一个底部导航栏和4张图像。我现在想在图像下放置文字，但找不到方法。

我已经使用span，div ...了，什么都没做。

def eval_numerical_gradient(f, x, verbose=True, h=0.00001):

    fx = f(x) # evaluate function value at original point
    grad = np.zeros_like(x)
    # iterate over all indexes in x
    it = np.nditer(x, flags=['multi_index'], op_flags=['readwrite'])
    while not it.finished:

        # evaluate function at x+h
        ix = it.multi_index
        oldval = x[ix]
        x[ix] = oldval + h # increment by h
        fxph = f(x) # evalute f(x + h)
        x[ix] = oldval - h
        fxmh = f(x) # evaluate f(x - h)
        x[ix] = oldval # restore

        # compute the partial derivative with centered formula
        grad[ix] = (fxph - fxmh) / (2 * h) # the slope
        if verbose:
            print(ix, grad[ix])
        it.iternext() # step to next dimension

    return grad

    .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%);
}

目前我知道了：document

我想要的是：https://i.imgur.com/YSah00h.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;
}

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

2 个答案: