I tried so many thing, but I cannot get it to work. What I want to create is 7 item grid with a background image, a semi-transparent overlay to be able to darken the image in dark mode as well as some text that is centered in the grid-item.

My current version is:

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: 14vw;
  grid-gap: 0px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
</style>

<grid-container>
  <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"><h1 style="color: #fff;font-size: 42px;justify-self: center;
    align-self: center;">Monday</h1></span></grid-item>
  <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"><h1 style="color: #fff;font-size: 42px;justify-self: center;
    align-self: center;">Tuesday</h1></span></grid-item>
    <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"><h1 style="color: #fff;font-size: 42px;justify-self: center;
      align-self: center;">Wednesday</h1></span></grid-item>
      <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"><h1 style="color: #fff;font-size: 42px;justify-self: center;
        align-self: center;">Thursday</h1></span></grid-item>
        <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"><h1 style="color: #fff;font-size: 42px;justify-self: center;
          align-self: center;">Friday</h1></span></grid-item>
          <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"><h1 style="color: #fff;font-size: 42px;justify-self: center;
            align-self: center;">Saturday</h1></span></grid-item>
            <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"><h1 style="color: #fff;font-size: 42px;justify-self: center;
              align-self: center;">Sunday</h1></span></grid-item>
</grid-container>

But it just is not what I wanted - the text needs to be centered and all in-div center tricks did not seem to have worked.

Grateful for an explanation! fj

CodePudding user response：

Just make the span flex containers as well. For instance...

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100vh;
  grid-gap: 0px;
}

grid-item, span {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

<grid-container>
  <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);">
      <h1 style="color: #fff;font-size: 42px;justify-self: center;
    align-self: center;">Monday</h1>
    </span></grid-item>
  <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);">
      <h1 style="color: #fff;font-size: 42px;justify-self: center;
    align-self: center;">Tuesday</h1>
    </span></grid-item>
  
</grid-container>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>