Проблема с позиционированием элементов с использованием Grid - PullRequest
Новая
       3

Проблема с позиционированием элементов с использованием Grid

0 голосов
/ 02 октября 2019

Я пытаюсь разместить раздел с полями 4х4. Каждое поле будет содержать изображение с заголовком и абзацем по центру по горизонтали и вертикали на изображении. Я хотел бы сделать это, не применяя картинки в качестве фона для каждого поля. У меня проблема с центрированием заголовка и абзаца в поле. 

.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>

1 Ответ

0 голосов
/ 03 октября 2019

[...] не реализующие изображения в качестве фона

Один из подходов, который создает эффект, которого вы хотите достичь (т. Е. Использование размеченных изображений в качестве фона элементов), заключается вприсвойте каждому изображению, которое предшествует заголовку и абзацу, 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>
...