0

Dentro de un div, tengo una < img > y debajo un < h2 >, lo que quiero lograr es centrar el texto dentro de la imagen. Lo que sucede en el siguiente codigo es que se centra, pero al estirar la pagina se descentra.

Este es el codigo del HTML

 <div class="presentacion">
        <img src="/Imagenes/desdesAfueraVerano.jpg" width="100%">
        <h2>Encuentra tu lugar entre las montañas</h2>   
 </div>

y este el CSS

.presentacion img{
position: relative;}

.presentacion h2{
position: absolute;
top:300px;
right: 120px;
color: white;}
1
  • se desconfigura al estirar la pagina por que tienes establecidos valores absolutos en tu h2. prueba a usar porcentajes o a definir los mediaqueries con sus respectivos valores
    – Csharls
    Commented el 20 abr. 2022 a las 20:21

2 respuestas 2

1

por si alguien vuelve a tener la misma duda yo lo solucione así

 <div class="presentacion">
    <img src="/Imagenes/desdesAfueraVerano.jpg" width="100%">
    <h2>Encuentra tu lugar entre las montañas</h2>   

el HTML queda igual, en el CSS hice que el container sea relative y el texto absolute

.presentacion{
position: relative;
}

.presentacion img{
max-width: 100%;
height: auto;
opacity: .88;
}

.presentacion h2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
color:#000;
}
0

Probá con este código. Agregué un "text-align: center" para el texto en el div, el div también tiene un "position: relative" y el texto un "position: absolute". A la imagen le puse un src distinto para que se vea el ejemplo de como queda.

.presentacion{
    position: relative;
    text-align: center;
}

.presentacion img{
    max-width: 100%;
    height: auto;
    opacity: .88;
}

.presentacion h2{
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="es">
<head> 
</head>

<div class="presentacion">
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpaperaccess.com%2Ffull%2F2181771.jpg&f=1&nofb=1&ipt=e48050a7cea0ca8fe6ac4f3d44d4747e64eec0c55d9a8ec7f8da181b0c19fb9b&ipo=images" width="100%">
    <h2>Encuentra tu lugar entre las montañas</h2>
</div>

</body>
</html>

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.