0

Tengo un problema y es que no consigo dejar centrado para todas las pantallas un texto que va dentro de una imagen y esta dentro de un link, cuando empiezo a hacer el responsive el texto se va demasiado para arriba, alguna manera de poder solucionarlo?

<div class="container">
  <a href="url">

    <img class="img" src="D:\prueba.jpg">

    <div class="texto">
        Texto Centrado 
    </div>

  </a>
</div>

.container {
    position: relative;
}

.img {
    float: left;
    object-fit: cover;
    width: 100%;
    height: 1080px;

}

.texto {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 50px;
    color: white;
    font-weight: 800;
    margin-top: 25%;
}

1 respuesta 1

1

Te pasa eso porque los porcentajes se calculan respecto al ancho y no al alto, por lo que al disimunuir el ancho de la pantalla el margin-top es menor y el texto va para arriba, para solucionarlo tienes dos formas, ponerle un margin-top en px para que no se mueva, pero eso se vería mal en dispositivos pequeños, la otra forma sería calcular la altura de la ventana con js y luego darle ese valor al margin-top del texto. No he podido ponerte un ejemplo pero hacer eso con js o con jquey no es muy complicado, de todas formas si necesitas un ejemplo coméntamelo y cuando tenga tiempo intento ayudarte mejor.

2
  • Gracias por la ayuda, me sirvio
    – lujan
    el 3 sep. 2018 a las 21:23
  • De nada, si te ha servido para solucionar tu problema marca la respuesta como correcta para que se considere como solucionada y pueda servir a otros con un problema similar. el 4 sep. 2018 a las 21:27

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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