Center align content over image using CSS

user_14996946 0
Viewed 126

I'm trying to center align the title, description, and button over the image on my site. Is there an efficient way of doing this? Maybe some custom CSS that would group them together and center them within the container?

Any help would be greatly appreciated, thanks.


.text-container {
  position: relative;
}

.text-container .btn {
  background-color: #FFFFFF;
  color: #181818;
  transition: 0.3s;
}

.text-container:hover .btn {
  background-color: #545454;
  color: #FFFFFF;
  transition: 0.3s;
}

.overlay-header-first {
  color: #FFFFFF;
  font-size: 1.8rem;
  position: absolute; 
  bottom: 25%; 
  left: 20%;
  text-align: center;
}

.overlay-description-first {
  color: #FFFFFF;
  font-size: 1rem;
  position: absolute; 
  bottom: 17%; 
  left: 20%;
  text-align: center;

}

.overlay-button-first {
  position: absolute; 
  bottom: 11%; 
  left: 20%;  
}

<section id="tiles" data-sequence="100">
    <div class="container-fluid">
        <div class="row no-gutters align-items-center pt-4 animatedParent animateOnce">
            <div class="col-md-6 pb-4 pb-lg-0 overlay text-container animated fadeIn slowest" data-id="1">
                  <a href="#"><img src="tree.png" class="img-fluid"></a>
                  <a href="#"><h2 class="overlay-header-first mb-4">TITLE ONE</h2></a>
                  <p class="overlay-description-first">Lorem ipsum dolor sit amet, consectetur adipiscing.<br>Elit ut ultrices pulvinar tristique.</p>
                  <a href="#"><btn class="btn btn-dark overlay-button-first">SHOP NOW</btn></a>                                                             
            </div>
            <div class="col-md-6 pb-4 pb-lg-0 overlay text-container animated fadeIn slowest" data-id="2">
                  <a href="#"><img src="tree.png" class="img-fluid"></a>
                  <a href="#"><h2 class="overlay-header-first mb-4">TITLE TWO</h2></a>
                  <p class="overlay-description-first">Lorem ipsum dolor sit amet, consectetur adipiscing.<br>Elit ut ultrices pulvinar tristique.</p>  
                  <a href="#"><btn class="btn btn-dark overlay-button-first">SHOP NOW</btn></a>                                                             
            </div>
        </div>
    </div>
</section>

enter image description here

css html
5 Answers

i add "text-wrapper" class & add some css to this class. Comment your unnecessary CSS

.text-container {
  position: relative;
}

.text-container .btn {
  background-color: #FFFFFF;
  color: #181818;
  transition: 0.3s;
}

.text-container:hover .btn {
  background-color: #545454;
  color: #FFFFFF;
  transition: 0.3s;
}

.overlay-header-first {
  color: #FFFFFF;
  font-size: 1.8rem;


}

 .overlay-description-first {
  color: #FFFFFF;
  font-size: 1rem;
/*   position: absolute; 
  bottom: 17%; 
  left: 20%; */

} 

.overlay-button-first {
/*   position: absolute; 
  bottom: 11%; 
  left: 20%;   */
} 


.text-wrapper {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
.text-container img {
    width: 100%;
}
<section id="tiles" data-sequence="100">
    <div class="container-fluid">
        <div class="row no-gutters align-items-center pt-4 animatedParent animateOnce">
            <div class="col-md-6 pb-4 pb-lg-0 overlay text-container animated fadeIn slowest" data-id="1">
                  <a href="#"><img src="https://cdn.pixabay.com/photo/2016/11/22/21/57/apparel-1850804_960_720.jpg" class="img-fluid"></a>
              
              <div class="text-wrapper"
                  <a href="#"><h2 class="overlay-header-first mb-4">TITLE ONE</h2></a>
                  <p class="overlay-description-first">Lorem ipsum dolor sit amet, consectetur adipiscing.<br>Elit ut ultrices pulvinar tristique.</p>
                  <a href="#"><btn class="btn btn-dark overlay-button-first">SHOP NOW</btn></a>      
      </div>
            </div>
           
        </div>
    </div>
</section>

user_130114860

Add same class to that you want to center

<a href="#"><img src="tree.png" class="img-txt"></a>
<a href="#"><h2 class="overlay-header-first mb-4 img-txt">TITLE ONE</h2></a>
<p class="overlay-description-first img-txt ">Lorem ipsum dolor sit amet, consectetur 
adipiscing Elit ut ultrices pulvinar tristique.</p>
<a href="#"><btn class="btn btn-dark overlay-button-first img-txt">SHOP NOW</btn></a>

add css to img-txt like below

  .img-txt{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }

it will center the text on image

user_135475310
user_126479800

I hope this is what you want, just put this inside and change the <img class="post-img" src="tree.png">

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.post {
  display: flex;
  justify-content: center;
  align-items: center;
}

.post-img {
  width: 100%;
}

.post-text {
  position: absolute;
  color: white;
  text-align: center;
}

.post-title {
  font-weight: bold;
  font-size: 1.5rem;
  text-align: left;
}

.post-button {
  color: black;
  background-color: white;
  padding: 0.5rem;
  width: 6rem;
}
<body>
    <div class="grid-container">
        <div class="post">
            <img class="post-img"
                src="https://www.telegraph.co.uk/content/dam/news/2016/09/08/107667228_beech-tree-NEWS_trans_NvBQzQNjv4BqplGOf-dgG3z4gg9owgQTXEmhb5tXCQRHAvHRWfzHzHk.jpg?imwidth=1400">
            <div class="post-text">
                <p class="post-title">TITLE TWO</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing.<br>Elit ut ultrices pulvinar tristique.</p>
                <p class="post-button">SHOP NOW</p>
            </div>
        </div>
        <div class="post">
            <img class="post-img"
                src="https://www.telegraph.co.uk/content/dam/news/2016/09/08/107667228_beech-tree-NEWS_trans_NvBQzQNjv4BqplGOf-dgG3z4gg9owgQTXEmhb5tXCQRHAvHRWfzHzHk.jpg?imwidth=1400">
            <div class="post-text">
                <p class="post-title">TITLE TWO</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing.<br>Elit ut ultrices pulvinar tristique.</p>
                <p class="post-button">SHOP NOW</p>
            </div>
        </div>
    </div>
</body>

user_151688710

If you are using bootstrap 4 or above, you can use this:

.text-container {
  position: relative;
}

.text-container .btn {
  background-color: #FFFFFF;
  color: #181818;
  transition: 0.3s;
}

.text-container:hover .btn {
  background-color: #545454;
  transition: 0.3s;
}

.overlay-header-first {
  font-size: 1.8rem;
  text-align: center;
}

.overlay-description-first {
  font-size: 1rem;
  text-align: center;
}

/*using this style block, you can center the absolute positioned div*/
.divInfo{
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}
/*------------------------------------------------------------------*/

/*This style add background opacity in the color definition last two digits */
.bg-lighter{
  background-color: #F8F9FADD !important;
}
/*----------------------------------------------------------------------------*/
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row no-gutters align-items-center pt-4 animatedParent animateOnce">
    <div class="col-md-12 pb-4 pb-lg-0 overlay text-container animated fadeIn slowest" data-id="1">
      <a href="#">
        <img src="https://www.sciencenewsforstudents.org/wp-content/uploads/2020/04/1030_LL_trees-1028x579.png" class="img-fluid">         </a>
      <!-- Added this part to content -->
      <div class="position-absolute divInfo d-flex flex-column align-items-center justify-content-center">
        <div class="text-center bg-lighter text-dark p-3 shadow">
        <!-- ------------------------- -->
          <a href="#"><h2 class="overlay-header-first mb-4">TITLE ONE</h2></a>
          <p class="overlay-description-first">Lorem ipsum dolor sit amet, consectetur adipiscing.<br>Elit ut ultrices pulvinar tristique.</p>
          <a href="#"><btn class="btn btn-dark overlay-button-first">SHOP NOW</btn></a>
        <!-- ------------------------- -->
        </div>
      </div>
      <!-- ------------------------- -->
    </div>
  </div>
</div>

I changed some part of your code because Bootstrap has its own style, but not for everything.

user_151714530
Related