項目不在網格容器內居中

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