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.