使用网格定位元素时出现的问题

Question

我正在尝试放置一个包含4x4字段的部分。每个字段将包含一个图片，标题和段落在图片上水平和垂直居中。我想通过不将图片作为每个字段的背景来实现。我有问题的标题和段落居中的一个领域。

​

.container-2 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  margin-bottom: 100px;
}

#pic-1 {
  grid-column: 1/3;
  grid-row: 1/2;
  width: 100%;
  height: 100%;
}

#pic-1 img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#pic-1 h3 {
  z-index: 1;
  text-align: center;
}

#pic-2 {
  grid-column: 3/5;
  grid-row: 1/2;
}

#pic-3 {
  grid-column: 1/3;
  grid-row: 2/3;
}

#pic-4 {
  grid-column: 3/5;
  grid-row: 2/3;
}

<div class="container-2">
  <div id="pic-1">
    <img src="./img/practise-areas.jpg" alt="">
    <h3>USLUGE KOJE PRUZAMO</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi velit, consequatur veniam dolorem eligendi tenetur ex?</p>
  </div>
  <div id="pic-2">
    <img src="./img/who-we-are.jpg" alt="">
    <h3>KO SMO MI?</h3>
  </div>
  <div id="pic-3">
    <img src="./img/getting-started2.jpg" alt="">
    <h3>KONTAKTIRAJTE NAS</h3>
  </div>
  <div id="pic-4">
    <img src="./img/how-we-work.jpg" alt="">
    <h3>NAS NACIN RADA</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi velit, consequatur veniam dolorem eligendi tenetur ex?</p>
  </div>
</div>

​

Answer 1

...不将图片作为背景实现

一种方法，创造了你想要达到的效果(即。使用标记的图像作为元素背景)是给标题和段落之前的每个图像一个position: absolute (将其从文档流中删除)，然后应用样式：top: 0，left: 0和width: 100%，height: 100%。

我在字段中居中显示标题和段落时遇到问题。

要水平居中每个字段中的标题和段落，只需应用样式：text-align: center。

工作示例：

​

.container-2 {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
}

.container-2 div {
  position: relative;
  text-align: center;
}

.container-2 img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="container-2">
  <div id="pic-1">
    <img src="./img/practise-areas.jpg" alt="">
    <h3>USLUGE KOJE PRUZAMO</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi velit, consequatur veniam dolorem eligendi tenetur ex?</p>
  </div>
  <div id="pic-2">
    <img src="./img/who-we-are.jpg" alt="">
    <h3>KO SMO MI?</h3>
  </div>
  <div id="pic-3">
    <img src="./img/getting-started2.jpg" alt="">
    <h3>KONTAKTIRAJTE NAS</h3>
  </div>
  <div id="pic-4">
    <img src="./img/how-we-work.jpg" alt="">
    <h3>NAS NACIN RADA</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi velit, consequatur veniam dolorem eligendi tenetur ex?</p>
  </div>
</div>

​