Question

我有一个包含图像的容器，在该图像的顶部有一个按钮，但是在容器内部的右侧创建了“额外”空间。我需要删除此多余空间，因为它占用了太多空间。所有3张水平图像均在中央对齐，同时使用柔性显示屏。使用引导程序。

宽度或高度没有尺寸，仅是此按钮后面的图像。

        <br>
          <h1 class="text-center">¿Qué temas te interesan?</h1>
        <div class="row justify-content-around">

          <div class="d-flex align-content-center flex-wrap container-img-intereses">
              <a href="#"> <br> <img src="/btn-desarrollo-ing.png"  width="350px"/></a>
              <button type="button" class="btn btn-primary" id="wrapper-button">Carreras</button>
          </div>

            <div class="d-flex align-content-center flex-wrap">
              <a href="#"> <br>
                <img src="/btn-diseno-ux.png" width="350px"/></a>
            </div>

              <div class="d-flex align-content-center flex-wrap">
                <a href="#"><br>
                  <img src="/btn-mkt.png" width="350px"/></a>
              </div>
            </div>

              <div class="row justify-content-around">
                <div class="d-flex align-content-center flex-wrap">
                  <a href="#"> <br>
                    <img src="/btn-negocios.png" width="350px"/></a>
                </div>

                <div class="d-flex align-content-center flex-wrap">
                  <a href="#"> <br>
                    <img src="/btn-comunidad.png"width="350px"/></a>
                </div>

                  <div class="d-flex align-content-center flex-wrap">
                    <a href="#"> <br>
                      <img src="/btn-produccion-aud.png"width="350px"/></a>
                  </div>
                </div>

                <br>

                  <div class="d-flex justify-content-center flex-wrap">
                    <a href="#"><img src="/btn-crecimiento-prof.png"width="350px"/></a>
                  </div>

.container-img-intereses {
    border: 1px solid black;
    display: inline-flex;
    align-items: center;
    text-align: center;

}

.container-img-intereses > img {
    position: absolute;
    z-index: -1;  
}

.btn {
    right: 80px;
    top: 40px;
    position: relative;
    z-index: 1;
}

https://imgur.com/a/JEo68bF我必须重复此过程并将其放入一个过程中，以便始终在这些矩形的顶部放置一个按钮。

Answer 1

不确定该按钮是否对您有用，因为尚不清楚您要使用该按钮做什么。您可以为父div设置相对位置，并使按钮与div绝对对齐，然后相应地调整HTML和CSS，请参见代码段：

.container-img-intereses {
  display: inline-flex;
  align-items: center;
  text-align: center;
  position: relative;
}

.container-img-intereses>img {
  position: absolute;
  z-index: -1;
}

.btn {
  position: absolute;
  left: 50%;
  bottom: 0px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
<h1 class="text-center">¿Qué temas te interesan?</h1>
<div class="row justify-content-around">

  <div class="d-flex align-content-center flex-wrap container-img-intereses">
    <a href="#"> <img src="/btn-desarrollo-ing.png" width="350px" /></a>
    <button type="button" class="btn btn-primary" id="wrapper-button">Carreras</button>
  </div>

  <div class="d-flex align-content-center flex-wrap">
    <a href="#"><img src="/btn-diseno-ux.png" width="350px" /></a>
  </div>

  <div class="d-flex align-content-center flex-wrap">
    <a href="#"><img src="/btn-mkt.png" width="350px" /></a>
  </div>
</div>

<div class="row justify-content-around">
  <div class="d-flex align-content-center flex-wrap">
    <a href="#"><img src="/btn-negocios.png" width="350px" /></a>
  </div>

  <div class="d-flex align-content-center flex-wrap">
    <a href="#"><img src="/btn-comunidad.png" width="350px" /></a>
  </div>

  <div class="d-flex align-content-center flex-wrap">
    <a href="#"><img src="/btn-produccion-aud.png" width="350px" /></a>
  </div>
</div>

<br>

<div class="d-flex justify-content-center flex-wrap">
  <a href="#"><img src="/btn-crecimiento-prof.png" width="350px" /></a>
</div>

Answer 2

实际上，如果需要将按钮显示在图像上方，则相对于按钮的位置。因此，按钮将采用其宽度。

相对位置：如果您设置为相对位置，则元素在相同的确切位置上占据的空间量应该与假定的位置是静态的一样，但是可能会被推到其他位置视觉上。 这就是为什么它要在图像周围变空。
绝对位置：绝对位置使文档脱离文档流。这意味着它不再像static和relative那样占用任何空间。

因此，您需要在按钮上添加位置绝对并相对于其容器container-img-intereses定位

删除容器内部创建的空间

2 个答案: