响应式文本覆盖在响应式图像之上

Question

利用bootstrap，我有一个响应式图像和一些覆盖文本/按钮，我想把它们放在图像的中心。然而，尽管文本在img标记的div中，当屏幕尺寸缩小时，文本不会停留在中心。它应该是什么样子的：

​

在响应中看起来是什么样子：

​

HTML代码：

 <div id="container-a" class="img-content">
        <img src="../img/file.large.jpg" class="img-fluid" alt="workout world img" width="1440" height="600">
            <span class="text-box-a container px-4 text-center z-2 align-items-center">
            <div class="text-box-b">
                <h1 class="main-text f-30 f-sm-50 f-md-75 f-xl-75 text-center font-weight-bold animated fadeInUpSmooth" style="font-size:6vw;">Gains are simply one click away!</h1>
                <button type="button" class="btn btn-info" style="font-size:3vw;">Ready?</button>
            </div>
            </span>
 </div>

CSS代码：

#container-a img {
  position: relative;
  display: block;
  z-index: 1;
  top: 0px;
  left: 0px; 
  padding-bottom: 20px;
}
.img-content {
  display: inline;
}

@media screen and (min-width: 601px) {
 .text-box-a {
   font-size: 80px;
 }
}
  @media screen and (max-width: 600px) {
.text-box-a {
  font-size: 30px;
 }
}

.text-box-a {
  z-index: 20; 
  top: 50%; 
  left: 50%;
  overflow: hidden;
  position: absolute;
  align-items: center !important;
  text-align: center !important;
  transform: translate(-50%, -50%); 
  text-shadow: 2px 2px #585858;
}
.text-box-b {
  background: rgb(204, 204, 204);
  background: rgba(204, 204,204, .1);  
}

.img-content .main-text {
   z-index: 2;
}

Answer 1

您的问题是.text-box-a使用top的%度量，也不确定如果没有指定的width / height，overflow属性在.text-box-a上用于什么。

此外，我还建议使用横幅图像作为background-image:url();，而不是使用img标记

<div class="container">
<div class="text-box-a"></div>
</div>

.container{
display:flex;
justify-content: center
width:100%;
background-image:url(image.jpg);
background-size:contain;
height:/*height of banner img*/
}
.text-box-a{
padding:;
;
}

试着这样组织你的顶部横幅。使用padding将子项放置在横幅图像中。并使用display:flex;和justify-content:center;将您的项目居中。

有多种方法可以解决你的问题，但这里是我使用的解决方案。