css - 使用 Grid 定位元素的问题

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

[...] not implementing pictures as a backgrounds

一种创建您希望达到的效果的方法(即使用标记图像作为元素背景)是为标题和段落之前的每个图像提供一个 position: absolute(以将其从文档流中取出)，然后应用样式:top: 0、left: 0 和 width: 100%、高度:100%。

I am having problem centering header and paragraph in a field.

要在每个字段中水平居中标题和段落，您只需应用样式: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>