0

llevo un rato tratando de situar un botón en el centro de una imagen y finalmente en W3Schools he encontrado una solución, lo hacen con

position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 

el:

position: absolute;
  top: 50%;
  left: 50%;

ya lo tenia, pero me quedaba el botón ligeramente desplazado, tras añadir eso he conseguido lo que buscaba, pero soy bastante novato en la programación y no se que son esos comando. Me gustaría saberlos para aprender de cara a un futuro esas funciones que me pueden ser útiles supongo.

Adjunto el código por si ayuda.

HTML

<div class="pagecontainer">

  <!-- SOCIAL -->
  <div class="fotoscategoriashomediv">
  <img class="fotoscategorias" src="secciones/comprimidas/Social.jpg" alt="">
  <div class="botonescategorias">
    <button type="button" name="Social">  <a class="enlaceblanco textoboton" href="social.html">Social</a></button>
    </div>
   </div>

CSS con el que funciona

 position: relative;
}
.fotoscategorias{
 width: 100vw;
}
.botonescategorias{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
button{
 background-color: transparent;
padding: 5px;
border-radius: 5px;
transition-duration: 0.4s;
}
button:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.44), 0 17px 50px 0 rgba(0,0,0,0.39);
}
.textoboton{
 font-family: 'Open Sans', helvetica, sans-serif;
font-weight: 400;
color: white;
font-size: 200%;
margin: 10px;
}

CSS con el que no funciona

  position: relative;
}
.fotoscategorias{
  width: 100vw;
}
.botonescategorias{
  position: absolute;
  top: 50%;
  left: 50%;
  bottom:50%;
  right:50%;
}
button{
  background-color: transparent;
padding: 5px;
border-radius: 5px;
transition-duration: 0.4s;
}
button:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.44), 0 17px 50px 0 rgba(0,0,0,0.39);
}
.textoboton{
  font-family: 'Open Sans', helvetica, sans-serif;
font-weight: 400;
color: white;
font-size: 200%;
margin: 10px;
} 

Muchas gracias.

1
  • Claro, pero no entiendo porque con esa funcion si consigo ponerlo en el centro y sin ella no. Si no no habria preguntado. Commented el 8 nov. 2020 a las 16:38

1 respuesta 1

1

Hola no es necesario agregar el transform: translate(-50%, -50%); igual esa propiedad sirve para posicionar un elemento en el eje X y el eje Y. mira los cambios que hice del código CSS que dices que no funciona.

.botonescategorias{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 106px;
}

Espero te sirva de algo, solo darle un ancho al elemento y agregar el margin es mas que suficiente para centrar un elemento con position: absolute; saludos.

Tu Respuesta

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

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