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.