代码之家 › 专栏 › 技术社区 › ThomasRones

将文本置于图像中心(并做出响应)?

bootstrap-5 css html javascript

ThomasRones · 技术社区 · 3 年前

在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随图像调整大小,以便文本在图像上居中

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

当前想法: 将内容放入另一个子分区,使其灵活,使文本居中,并对齐内容/对齐项目 & JS addEventListener可以调整窗口大小,获取img div并将nextSibling size设置为该值。

这些是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;
}

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

0 回复 | 直到 3 年前

awran5 3 年前

如果您使用的是Bootstrap 5,那么只需使用内置类即可。

申请 .position-relative 直截了当 div 父母亲
申请 .img-fluid 到 <img /> 使图像响应
申请 .position-absolute , .top-50 , .start-50 , translate-middle 到 堆栈文本 使其在图像上垂直和水平居中。

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

Soumik mahato 3 年前

文本“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>