网格容器内未对中的项

Question

在2x2网格中，标题和文本元素的中心位置有问题。我已经尝试过在父容器".skills“和子元素”..skills item“上使用/items/self。另外，请注意网格位于一个flex容器中，我不知道这是否与它有任何关系，但我是一无所知的。

​

.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12.8rem 8rem 6.4rem 8rem;
  background-color: #ebebff;
}

.backstory {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60rem;
  margin-bottom: 4.8rem;
  text-align: center;
}

.skills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 4.8rem;
  column-gap: 6.4rem;
  justify-items: center;
}

.skills-item {
  display: inline-block;
}

<section class="about">
  <div class="backstory">
    <h2>Hi, I'm Mayitu Wangala</h2>
    <p>
      I'm a software developer. I became interested in computer science in college and became immersed in the world of IT. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci.
    </p>
  </div>

  <div class="skills">
    <!--Rename/regroup skills later-->
    <div class="skills-item 3-lang">
      <h3 class="skills-heading">HTML, CSS, Javascript</h3>
      <p>
        My knowledge of HTML, CSS, and javascript allows me to create beautiful, responsive projects and websites.
      </p>
    </div>
    <div class="skills-item python">
      <h3 class="skills-heading">Python</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci
      </p>
    </div>
    <div class="skills-item data-structures">
      <h3 class="skills-heading">Data Structures</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci
      </p>
    </div>
    <div class="skills-item design">
      <h3>Design</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci
      </p>
    </div>
  </div>
</section>

​

Answer 1

您应该将父类设置为flexbox，以便按照您的意愿对齐子元素。

 .skills-item{
    display:flex;
    }

由于p标记中的文本看起来不像是居中的，即使是这样，您也可以尝试使用text-align:center;。