I'm new to coding and I'm using bootstrap 4. I want to overlap text with image and align it to the centre, here's the code...please help

HTML

<div >
<img src="images/front_page_img.jpg" alt="front_page_image" >
<div >
  <h1>T.A.C.S.</h1>
</div>

CSS

.container-fluid {
  padding: 0;
}

/* FRONT PAGE */
.front_page {
  position: relative;
}
.front_page_img {
  max-width: 100%;
  position: absolute;
}
.front_page_brand {
  position: absolute;
  color: red;
}

CodePudding user response：

.front_page_brand {
  position: absolute;
  color: red;
  left: 50%;
  transform: translate(-50%, 0);
}

CodePudding user response：

All you would need to do is flex the parent container and justify-content: center;. Then, with your position already being absolute, it will overlap the image. Check out the code snippet below.

.container-fluid {
  padding: 0;
}

/* FRONT PAGE */
.front_page {
  position: relative;
  display: flex;
  justify-content: center;
}
.front_page_img {
  max-width: 100%;
  position: absolute;
}
.front_page_brand {
  position: absolute;
  color: red;
}

<div >
<img src="https://dummyimage.com/400/000/fff" alt="front_page_image" >
<div >
  <h1>T.A.C.S.</h1>
</div>