在图像上居中文本（并做出响应）？

Question

在col-2中，我试图将“WHAT”文本置于图像的中心。

<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>

当我们调整浏览器的大小时，行的高度会改变，以便col-10中的所有内容都适合。我使用对象拟合：包含来保持图像比例正确。我需要"stack-Txt"div来调整图像的大小，以便文本将保持在图像的中心

或者你知道一个更好的方法来实现这一点？

目前的想法：把什么放在另一个子div，使flex，居中的文本证明内容/对齐项目

这些是css类在某一点上。。。但唯一重要的是img不会溢出col-2或高度（根据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;
}

*注意：我也有媒体查询来调整文本大小，但这不会有什么区别。

Answer 1

文本“什么”在任何屏幕分辨率下位于图像的中心。

.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>

Answer 2

如果您使用的是Bootstrap5，那么您可以使用内置类来实现这一点。

• 应用. loction-相对到主div父
• 应用. img-flow到

<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>