CSS 网格未居中顶行

Question

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

#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

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

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>

Answer 2

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

要回答您的问题，您可以使用以下方法将第一个元素居中：.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>

CSS 网格未居中顶行

CSS Grid not centering the top row

html

css

alignment

css-grid