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

Question

Utilizing bootstrap, I have a responsive image and some overlay text/button that I would like placed in the center of the image. However, despite the text being w/in the div of the img tag, the text doesn't stay in the center when the screen size is shrunk. What it's supposed to look like:

What it looks like in responsive:

HTML code:

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

#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

Your problem is .text-box-a using % measurement for top , also unsure what the overflow property is for on .text-box-a if there is no specified width / height .

Also I would advise a to use the banner image as a background-image:url(); instead of using a img tag

<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:;
;
}

Try to structure your top banner like this. Use padding to position the children inside your banner image. And use display:flex; and justify-content:center; to center your items.

There's a variety of ways to solve your issue, but here are solutions I use.