No estoy completamente seguro de si esto es tan simple como debería ser. He estado probando diferentes métodos, pero parece que no puedo entenderlo.

Tengo una sección de portada en mi página principal que contiene un logotipo y un botón dentro:

<section id="cover">

        <div id="cover-caption" class="animated fadeInDown">

            <p style="padding-bottom: 2rem;"><img src="http://bizcentralusa.com/wp-content/uploads/2016/05/placeholder-sample-logo.png" alt="Sample Logo" /></p>
            <p class="lead">
                <a class="btn btn-primary btn-lg" data-scroll href="#getStarted" role="button">GET STARTED <i class="fa fa-angle-right animated wobble infinite" aria-hidden="true"></i>
                </a>
            </p>

        </div>

    </section>

El fondo de la portada es una imagen de una computadora portátil que cubre la mitad de la página. Quiero que el logotipo y el botón se ubiquen entre la parte superior de la página y el inicio de la pantalla de la computadora portátil.

Esto es lo que tengo hasta ahora (creo que es más fácil para usted ver visualmente lo que estoy tratando de lograr que hacer que lo explique) ...

Demo

Normalmente, simplemente pondría algo de relleno en el contenedor # cover-caption hasta que empuje hacia abajo a la posición que quiero, pero esto no funciona para todas las resoluciones de pantalla. Se veía bien en la PC con la que estoy editando, pero cuando lo probé en mi Macbook, aunque el logotipo y el botón estaban en la misma posición, la imagen de fondo había cambiado porque la altura del navegador era diferente. Supongo que lo que intento hacer es obtener mi logotipo y botón para ajustar automáticamente su posición para cambiar con la imagen de fondo cuando se cambia la altura de la ventana del navegador. ¿Esto es posible?

Este es mi código completo

0
jkarakizi 9 mar. 2017 a las 12:18

2 respuestas

La mejor respuesta

Esto debería ser fácil a través de css flexbox y la altura de la ventana gráfica.

#cover-caption{
  display: flex;
    height: 66vh;
    flex-direction: column;
  justify-content: center;
}
#cover-caption > *{
  flex: 0 1 auto;
}

Ver violín adaptado

1
phils 9 mar. 2017 a las 09:32

Deberías probar css like

#cover-caption{
    display: block;width: 20%;margin: 20px auto;position: relative;top: 100px;
}

Esto puede ayudar.

0
Tom 9 mar. 2017 a las 10:24