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

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 中的所有内容都适合。我正在使用 object-fit:contain 来保持图像比例正确。 我需要“stack-Txt”div 来调整图像的大小，以便文本保持在图像的中心

或者，也许您知道实现此目的的更好方法？

目前的想法： 将 WHAT 放在另一个子 div 中，使用 justify-content/align-items 制作 flex、居中文本 & JS addEventListener 调整窗口大小，获取img div 并设置nextSibling 大小等于这个。

这些是某些时候的 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

如果您使用的是 Bootstrap 5，您可以使用内置类来实现。

• 将.position-relative 应用于主div 父级
• 将.img-fluid 应用于<img /> 以使图像具有响应性
• 将.position-absolute、.top-50、.start-50、translate-middle 应用于stack-Txt，使其在图像上垂直和水平居中。

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

如果您不这样做，只需按如下方式编辑您的 CSS：

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

Answer 2

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

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