项目不在网格容器内居中

Question

我无法在 2x2 网格中将标题和文本元素居中。 我已经尝试在父容器“.skills”和子元素“.skills-item”上使用 justify-content/items/self。 另外，请注意网格在一个弹性容器内，我不知道这是否与它有任何关系，但我一无所知。

 .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

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

 .skills-item{
    display:flex;
    }

由于p标签内的文本看起来不居中，即使居中，您可以尝试使用text-align:center; .