删除在我的容器内创建的空间 [重复]

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

实际上，如果您需要在图像上显示按钮，则您正在使用相对于按钮的位置。所以按钮将采用它的宽度。

1. 相对位置：如果设置为相对位置，则元素在它应该占据的相同位置占据相同数量的空间，就好像它的位置是静态的一样。但是，它可以看起来被推到不同的位置视觉上。 这就是它在图像周围占用空间的原因。
2. 绝对位置：绝对位置使文档脱离文档流。这意味着它不再像 static 和 relative 那样占用任何空间。

所以你需要在按钮上添加位置 absolute 和相对于它的容器 container-img-intereses 的位置

Answer 2

不确定这是否适合您，因为不清楚您想使用该按钮做什么。您可以给父 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>