CSS 网格未居中顶行

Question

我对以下布局中的第一行有疑问。 它不会居中，只会停留在两列的左侧。
它需要像底部一样位于中心。 即使我通过 CSS Grid 使用相同的方式，底部的那个也可以很好地居中。 请检查我附上的图片。

 #about-container { grid-area: first; } #ul-first { grid-area: second; } #ul-second { grid-area: third; } #ul-third { grid-area: fourth; }.footer-links { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "first first" "second third" "fourth fourth"; }

 <section class="footer-links"> <div class="about-container"> <div class="about"> <h1>Title</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, aperiam quaerat? Nam reprehenderit, amet minus illum natus facere accusamus aut voluptatem. Sapiente ipsa praesentium unde, voluptatem assumenda facilis asperiores eum!</p> </div> </div> <div class="list" id="ul-first"> <ul> <li><a href="#">Why Buy From Us</a></li> <li><a href="#">Company Policy</a></li> <li><a href="#">Maintenance</a></li> <li><a href="#">Financing</a></li> </ul> </div> <div class="list" id="ul-second"> <ul> <li><a href="#">Request a Quote</a></li> <li><a href="#">Get in Touch with Us</a></li> <li><a href="#">Book Preventive Maintenance</a></li> </ul> </div> <div class="list" id="ul-third"> <ul> <li><a href="#">Nissan GT-R</a></li> <li><a href="#">Mitsubishi Lancer</a></li> <li><a href="#">Toyota Corolla Touring</a></li> <li><a href="#">McLaren P1</a></li> </ul> </div> </section>

Answer 1

首先，您的代码中存在一个错误：在您的 CSS 中，您指定了 id 的规则： #about-container但它在您的 HTML 中不存在（它是一个 class）。
其次，您的代码不会产生图像中的结果（您似乎正在使用属性text-align:center;我无法在您共享的代码中看到）。

要回答您的问题，您可以使用以下方法将第一个元素居中： .about { width:50%; margin:0 auto; } .about { width:50%; margin:0 auto; } 以你的例子，它会是（我也更正了我上面指出的两个错误.about { width:50%; margin:0 auto; } ：

 #about-container { grid-area: first; }.about { width: 50%; margin: 0 auto; } #ul-first { grid-area: second; text-align: center; } #ul-second { grid-area: third; text-align: center; } #ul-third { grid-area: fourth; text-align: center; }.footer-links { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "first first" "second third" "fourth fourth"; }

 <section class="footer-links"> <div id="about-container"> <div class="about"> <h1>Title</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, aperiam quaerat? Nam reprehenderit, amet minus illum natus facere accusamus aut voluptatem. Sapiente ipsa praesentium unde, voluptatem assumenda facilis asperiores eum!</p> </div> </div> <div class="list" id="ul-first"> <ul> <li><a href="#">Why Buy From Us</a></li> <li><a href="#">Company Policy</a></li> <li><a href="#">Maintenance</a></li> <li><a href="#">Financing</a></li> </ul> </div> <div class="list" id="ul-second"> <ul> <li><a href="#">Request a Quote</a></li> <li><a href="#">Get in Touch with Us</a></li> <li><a href="#">Book Preventive Maintenance</a></li> </ul> </div> <div class="list" id="ul-third"> <ul> <li><a href="#">Nissan GT-R</a></li> <li><a href="#">Mitsubishi Lancer</a></li> <li><a href="#">Toyota Corolla Touring</a></li> <li><a href="#">McLaren P1</a></li> </ul> </div> </section>

Answer 2

只需使用这个有用的技巧即可将大部分内容居中

element {
  text-align: center;
}

 #about-container{ grid-area: first; } #ul-first{ grid-area: second; } #ul-second{ grid-area: third; } #ul-third{ grid-area: fourth; }.footer-links{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "first first" "second third" "fourth fourth"; } h1 { text-align: center; }

 <section class="footer-links"> <div class="about-container"> <div class="about"> <h1>Title</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, aperiam quaerat? Nam reprehenderit, amet minus illum natus facere accusamus aut voluptatem. Sapiente ipsa praesentium unde, voluptatem assumenda facilis asperiores eum!</p> </div> </div> <div class="list" id="ul-first"> <ul> <li><a href="#">Why Buy From Us</a></li> <li><a href="#">Company Policy</a></li> <li><a href="#">Maintenance</a></li> <li><a href="#">Financing</a></li> </ul> </div> <div class="list" id="ul-second"> <ul> <li><a href="#">Request a Quote</a></li> <li><a href="#">Get in Touch with Us</a></li> <li><a href="#">Book Preventive Maintenance</a></li> </ul> </div> <div class="list" id="ul-third"> <ul> <li><a href="#">Nissan GT-R</a></li> <li><a href="#">Mitsubishi Lancer</a></li> <li><a href="#">Toyota Corolla Touring</a></li> <li><a href="#">McLaren P1</a></li> </ul> </div> </section>