0

tengo una imagen y un botón de volver que va encima de la imagen (entre el texto y la cabeza de las personas) El problema lo tengo para lograr que las posiciones sean responsive. Cuando modifico el ancho de ventana el centrado horizontal esta bien pero cambia la ubicación que había dado verticalmente...

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>

1 respuesta 1

2

Utilizando display: flex; podemos conseguir alinear vertical y horizontalmente sin problemas. Te pongo como dejar el CSS para conseguir el efecto que buscas:

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>

Los cambios son: display:flex, convierte al contenedor en flex, lo cual tenemos acceso a otras propiedades. align-items:center centramos verticalmente. justify-content: center centramos horizontalmente. Con margin-top podemos ajustar el centrado vertical.

Por lo tanto, nos sobra el top y left del boton.

Ejemplo

3
  • mejoro mucho, pero el unico problema es que el boton queda sobre las cabezas (si se alinea al centro) debe ir un poco mas arriba... probé ubicar boton e imagen en div separados y darle display:flex a el section pero se desalinean
    – Fernanda
    el 15 mar. 2019 a las 12:42
  • 1
    Puedes utilizar margin-top en el boton para cambiar la alineación, te he dejado un ejemplo en la respuesta (he tenido que cambiar la imagen ya que la que tenias no funciona) el 15 mar. 2019 a las 12:50
  • Perfecto! la única aclaración (para los que están iniciando como yo) es que el valor lo coloquen en % y no en px para que funcione correctamente. Gracias
    – Fernanda
    el 15 mar. 2019 a las 13:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.