Can I add text, centered, and on top of an image in CSS grid?

I have an image in my CSS grid, but I want to align text on top, and in the center, of the image in my grid. I don’t know how to do it without manually changing the position of the element.

My HTML:

<!DOCTYPE html>

<html>

<head>

  <title>Grid Stuff</title>

  <link rel="stylesheet" type="text/css" href="Perfect layout.css" />

  <link rel="stylesheet" type="text/css" href="master.css" />

</head>

<body>

  <div class="container">

    <header>

    <ul>

      <li><h3 id="logo">Dinno Optical</h3></li>

      <li><h3>Home</h3></li>

      <li><h3>Book an Appointment!</h3></li>

      <li><a target="_blank" href="About Us.html"><h3>Offers</h3></a></li> 

      <li><a target="_blank" href="About Us.html"><h3>About Us</h3></a></li> 

    </ul>

    </header>

    

    <nav>

      <img src="./pictures/marcos-paulo-prado-6OEnQsKQQ8c-unsplash.jpg" alt="Mountains" style="width:100%">

      <img id="doug" src="pictures/carlos-vaz-KP4bxnxAilU-unsplash.jpg" alt="Forest" style="width:100%">

      <img id="bob" src="./pictures/scott-van-daalen-UsALNdok2m4-unsplash.jpg" alt="Forest" style="width:100%">

      <img id="smile" src="./pictures/susan-duran-LHaqQkG_mgQ-unsplash.jpg" alt="Forest" style="width:100%">

    </nav>

    <section class="left">

      <h2>Left</h2>

      

    </section>

    <div class="overlap">

      <a target="_blank" href="About Us.html"><h3 style="color: white">Offerings!</h3></a>

    </div>

    <section class="right">

      <h2>Google Reviews</h2>

      <h2><img src="./pictures/Fahad 1.jpeg" alt="pic">Sami Dinno</h2>

          <h3>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio, ipsam? </h3>

      <h2><img src="./pictures/Fahad 1.jpeg" alt="pic">Sami Dinno</h2>

          <h3>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio, ipsam? </h3>

      <h2><img src="./pictures/Fahad 1.jpeg" alt="pic">Sami Dinno</h2>

      <h3>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio, ipsam? </h3>

      <h2><img src="./pictures/Fahad 1.jpeg" alt="pic">Sami Dinno</h2>

      <h3>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio, ipsam? </h3>

    </section>

    <footer>

      <h1>Footer</h1>

      <h1>Book with us today!</h1>

      <h2>(905) 497-4600<br>dinnooptical@gmail.com<br>

        147 Clarance st. Unit 33, Brampton, ON <br>

        <a target="_blank" href="https://www.google.com/maps/place/Dinno+Optical/@43.6890343,-79.7423311,19z/data=!3m1!4b1!4m5!3m4!1s0x0:0x7e89e0c7fd01ef67!8m2!3d43.6890333!4d-79.7417838?hl=en-US"><img src="./pictures/Google maps copy.png"></a></td>

      </h2>

    </footer>

  </div>

</body>

</html>

My CSS:

/*

  - Color of links don't change--only the link decoration does. 

  - transformIn animation didn't work. 

  

*/

.container {

    display: grid;

    max-width: 900px;

    position: relative;

    margin: auto;

    grid-gap: 10px;

    grid-template: minmax(50px, 300px) repeat(12, 1fr) / repeat(6, 1fr);

  }

  

  h1, h2, h3 {

    font-family: monospace;

    text-align: center;

  }

  #logo {

    font-size: 40px;

  }

  li {

    margin: 0 auto;

    padding: 0px;

    display: block;

    line-height: 10px;

    color: white;

  }

  header {

    background-color: #06cece8F;

    grid-area: 1 / 1 / 1 / 7;

    position: sticky;

    top: 0px;

  }

  

  nav {

    background-color: beige;

    grid-area: 3 / 1 / 2 / 7;

  }

  

  .left {

    background-color: dodgerblue;

    grid-area: 3 / 1 / 3 / 5;

  }

  

  .right {

    background-color: beige;

      grid-area: 3 / 5 / 3 / 7;

  }

  nav img{

    width: 50%;

    text-align: center;

  }

  .right img {

    width: 10%;

    display: inline-block;

  }

  

  .overlap {

    background-color: #f87557;

    color: white;

    grid-area: 6 / 4 / 8 / 6;

    z-index: 5;

    position: fixed;

    font-size: 30px;

    opacity: 0.9;

  }

  

  .overlap :hover {

    color: #57DBF8;

    transition: color;

  } 

  footer {

    background-color: dodgerblue;

    grid-area: 4 / 1 / 4 / 7;

  }

You can try making the image the background of a tag and then you can control elements on top of it.

Or use an image editor (but then you lose responsiveness in smaller screens, unless you make x images for every x type of view you need).

1 Like