Блог

Я работаю над веб-сайтом, и у меня есть 4 ячейки сетки, которые занимают раздел моей веб-страницы. Проблема в том, что весь мой текст находится в случайных местах, я хочу, чтобы он был центрирован внутри каждого элемента сетки (один серый, один синий, один черный, один желтый).

Я перепробовал все комбинации justify, align, self, есть идеи, как я могу это сделать? Любая помощь была бы очень признательна.

Вот мой jsfiddle, документирующий проблему: https://jsfiddle.net/RomelF/jd8L7a6n/3 /

И вот мой HTML:

 <div class="container">
<section id="welcome-section"><h1 id="name">My name's Romel, here are some of my projects:</h1>
</section>
<section id="projects">
  <div class="project-tile" id="p1"><p class="ptext"><a href="#">Tribute Page<a></p></div>
  <div class="project-tile" id="p2"><p class="ptext"><a href="#">Political Questionnaire<a></p></div>
  <div class="project-tile" id="p3"><p class="ptext"><a href="#">Landing Page<a></p></div>
  <div class="project-tile" id="p4"><p class="ptext"><a href="#">Technical Documentation<a></p></div>
</section>
  

И вот мой CSS:

 #projects {
  width: 70%;
  display: grid;
}

...

.project-tile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: stretch;
  height: 50vh
}

#p1 {
  background: rgb(255,253,254);
  background: radial-gradient(circle, rgba(255,253,254,1) 0%, rgba(74,75,75,0.4) 100%);
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

#p2 {
  background-color: black;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

#p3 {
  background-color: blue;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

#p4 {
  background-color: yellow;
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.project-tile a {
  text-decoration: none;
}

.ptext {
  align-self: center;
}
  

ваш .project-tile не обязательно должен быть самой сеткой. Использование flexbox предоставляет вам все инструменты, необходимые для центрирования элемента.

 .project-tile {
   display: flex;
   place-items: center;
   height: 50vh;
}

.ptext {
  margin: auto
}
  

Это даст вам текст по центру до тех пор, пока текст не войдет в границы родительского элемента.

Пожалуйста, удалите этот стиль

 .project-tile{
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
}