Removing space created inside my container

Question

I have a container that has an image and on top of that image a button, but inside the container some "extra" space was created, at the right. I need to remove this extra space because its taking too much space. 3 horizontal images are aligned at the center, all while using a flex display. Using bootstrap.

There are no sizes in width or height, it is only the image behind this button.

        <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://i.stack.imgur.com/21uA9.jpg i have to repeat this and make it into a process so a button is always on top of these rectangles.

Do you have more sample HTML ? – SScotti Jul 02 '19 at 02:33 — SScotti, Jul 02 '19 at 02:33
yes! of course, i just updated the question. – Eduardo Jul 02 '19 at 04:03 — Eduardo, Jul 02 '19 at 04:03

SScotti · Answer 1 · 2019-07-02T16:41:17.507

Not sure this works for you since it isn't clear what you want to do with that button. You could give the parent div a position of relative and make the button absolutely positioned with the div, and then adjust your HTML and CSS accordingly, see Snippet:

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

yes, this is also correct, i needed to set the position of my div element to relative and the button to absolute thanks. — Eduardo, Jul 02 '19 at 16:35

score 1 · Answer 2 · edited Jul 02 '19 at 06:24

Actually if you need to show the button up the image you are using position relative to button. So button will be take it's width.

Position relative: If you set to position relative, elements take up the same amount of space at the same exact position it was supposed to take as if its position was static.It can however, appear to be pushed to a different location visually. So that's why it's taking sapce around the image.
Position absolute: Position absolute takes the document out of the document flow. This means that it no longer takes up any space like what static and relative does.

So You need to add position absolute on button and position relative to it's container container-img-intereses

this worked for me, thanks a lot! just need to correctly place the button at the bottom of the image. — Eduardo, Jul 02 '19 at 16:33

Removing space created inside my container

2 Answers2