En col-2, estoy tratando de centrar el texto "QUÉ" sobre la imagen.
<div class="row"> <div class="col-2"> <div class="stackParent"> <img class="stack-Img" src="img/base.png"> <div class="stack-Txt"> <div class="fourWsText stack-Txt-child">WHAT</div> </div> </div> </div> <div class="col-10"> ...Variable length content... </div> </div>A medida que cambiamos el tamaño del navegador, la altura de la fila cambiará para que todo en col-10 encaje. Estoy usando object-fit:contain para mantener las proporciones de la imagen correctas. Necesito el div "stack-Txt" para cambiar el tamaño con la imagen para que el texto permanezca centrado sobre la imagen
¿O tal vez conoces una mejor manera de lograr esto?
Idea actual: poner QUÉ en otro div secundario, hacer flex, centrar el texto conJustify-content/align-items y JS addEventListener para cambiar el tamaño de la ventana, obtener el div img y establecer el tamaño nextSibling igual a este.
Estas fueron las clases css en algún momento... pero lo único importante es que el img no desborde la col-2 o la altura (que es variable en función de la longitud de col-10)
.stackParent { position: relative; object-fit: contain; max-width: inherit; height: 20vh; } .stack-Txt { position: absolute; text-align: center; width: 100%; max-height: 15vh; min-height: 15vh; z-index: 4; } .stack-Txt-child { } .stack-Img { position: absolute; object-fit: contain; max-width: inherit; min-height: 15vh; max-height: 15vh; top: 0%; left: 0%; z-index: 3; }*Nota: También tengo consultas de medios para cambiar el tamaño del texto, pero esto no debería marcar la diferencia.
El texto "qué" está en el centro sobre la imagen en cualquier resolución de pantalla.
.stackParent{ display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .stack-Img{ position: absolute; margin: 0; min-height: 15vh; max-height: 15vh; } .stack-Txt{ z-index: 99; } <div class="row"> <div class="col-2"> <div class="stackParent"> <img class="stack-Img" src="img/base.png"> <div class="stack-Txt"> <div class="fourWsText stack-Txt-child">WHAT</div> </div> </div> </div> <div class="col-10"> ...Variable length content... </div> </div>Si está utilizando Bootstrap 5, puede usar las clases integradas para lograrlo.
.position-relative al principal div principal.img-fluid a <img /> para que la imagen responda.position-absolute , .top-50 , .start-50 , translate-middle to stack-Txt para centrarlo vertical y horizontalmente sobre la imagen. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="row"> <div class="col-2"> <div class="stackParent position-relative"> <img class="stack-Img img-fluid" src="https://source.unsplash.com/random"> <div class="stack-Txt position-absolute top-50 start-50 translate-middle"> <div class="fourWsText stack-Txt-child text-white">WHAT</div> </div> </div> </div> <div class="col-10"> ...Variable length content... </div> </div>Si no lo hace, simplemente edite su CSS de la siguiente manera:
.stackParent { position: relative } /* make image responsive */ .stack-Img { max-width: 100%; height: auto; } .stack-Txt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: white; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="row"> <div class="col-2"> <div class="stackParent"> <img class="stack-Img" src="https://source.unsplash.com/random"> <div class="stack-Txt"> <div class="fourWsText stack-Txt-child">WHAT</div> </div> </div> </div> <div class="col-10"> ...Variable length content... </div> </div>