• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

225
Views
¿Centrar el texto sobre la imagen (y hacer que responda)?

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.

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>
almost 3 years ago · Juan Pablo Isaza Report

0

Si está utilizando Bootstrap 5, puede usar las clases integradas para lograrlo.

  • Aplicar .position-relative al principal div principal
  • Aplique .img-fluid a <img /> para que la imagen responda
  • Aplique .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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error