Home / Questions / 245991
Accepted
Fernanda
Asked: 2020-03-16 04:00:25 +0800 CST 2020-03-16 04:00:25 +0800 CST

how to maintain the position of a button (or other element) on a responsive image

  • 772

I have an image and a back button that goes on top of the image (between the text and the person's head). The problem I have is making the positions responsive. When I modify the width of the window, the horizontal centering is fine, but it changes the location that I had given vertically...

body {
  margin: 0;
  padding: 0;
}

section#contruccion {
  width: 100%;
}

section#contruccion div#proxi {
  text-align: center;
}

section#contruccion div#proxi a#volver {
  position: absolute;
  top: 120px;
  z-index: 100;
  width: 40%;
  background: #b5de0a;
  font-size: .5rem;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 5px;
  left: 30%;
}

section#contruccion div#proxi img {
  width: 100%;
  position: relative;
  left: 0;
}
<html>

<body>
  <section id="contruccion">
    <div id="proxi">
      <a href="tienda_virtual.php" id="volver">VOLVER A TIENDAS</a>
      <img src="https://timondigital.com/web/imagenes/proximamente1.jpg" alt="estamos renovando">
    </div>
  </section>
 </body>

</html>

css

1 Answers

  1. Best Answer

    Using it display: flex;we can achieve vertical and horizontal alignment without problems. I put you how to leave the CSS to get the effect you are looking for:

    body {
  margin: 0;
  padding: 0;
}

section#contruccion {
  width: 100%;
}

section#contruccion div#proxi {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

section#contruccion div#proxi a#volver {
  position: absolute;
  z-index: 100;
  width: 40%;
  background: #b5de0a;
  font-size: .5rem;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 5px;
  margin-top: -220px;
}

section#contruccion div#proxi img {
  width: 100%;
  position: relative;
  left: 0;
}
    <html>

<body>
  <section id="contruccion">
    <div id="proxi">
      <a href="tienda_virtual.php" id="volver">VOLVER A TIENDAS</a>
      <img src="https://t1.ea.ltmcdn.com/es/images/9/0/5/como_saber_si_mi_cobaya_esta_en_celo_23509_600.jpg" alt="estamos renovando">
    </div>
  </section>
</body>

</html>

    The changes are: display:flex, makes the container flex, which we have access to other properties. align-items:centerWe center vertically. justify-content: centerWe center horizontally. With margin-topwe can adjust the vertical centering.

    Therefore, we have left over the top and left of the button.

    Example

    • 2