Sé que esta es una pregunta que ha sido respondida antes, pero por alguna razón, no puedo hacer que nada funcione. Tengo una imagen dentro de un div que es pegajosa. La imagen está actualmente alineada en el centro horizontalmente, pero no puedo hacer que se alinee en el centro verticalmente. La imagen está pegada en la parte superior del div.

Este es mi código HTML:

<section>
    <div class="stickyImg img-1">
        <img src="MainImgCrop.jpeg" class="stickyImg">
    </div>
</section>

Y este es mi código CSS:

section {
    display: flex;
    flex-direction: row;
}

section div.stickyImg {
    height: 92vh;
    background-color: purple;
    background-size: cover;
    background-position: center;
    position: sticky;
    position: -webkit-sticky;
    top: 8vh;
    width: 50vw;
    margin: 0;
}

.stickyImg {
    width: 90%;
    height: auto;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin: auto;
    vertical-align: middle;
    top: 50%;
}

Cualquier ayuda sería apreciada, gracias!

0
ajnabz 22 ene. 2021 a las 21:14

1 respuesta

La mejor respuesta
section {
    display: flex;
    flex-direction: row;
}

section div.stickyImg {
    height: 92vh;
    background-color: purple;
    background-size: cover;
    background-position: center;
    position: sticky;
    position: -webkit-sticky;
    top: 8vh;
    width: 50vw;
    margin: 0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.stickyImg {
    width: 90%;
    height: auto;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin: auto;
    vertical-align: middle;
    top: 50%;
}
<section>
    <div class="stickyImg img-1">
        <img src="MainImgCrop.jpeg" class="stickyImg">
    </div>
</section>
1
sundeep sharma 22 ene. 2021 a las 18:28