时间戳

首页 > 解决方案 > 在图像上居中文本（并做出响应）？

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

问题描述

在 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 中，制作 flex，使用 justify-content/align-items 和 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;
}

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

标签： javascripthtmlcssbootstrap-5

解决方案

在任何屏幕分辨率下，文本“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>

推荐阅读