在较小的屏幕尺寸上，列表不以 Flexbox 为中心

Question

在 600 像素时，我的 flexbox 变成了一列。第二个框中的列表在较小的屏幕尺寸上未正确居中。我尝试在媒体查询内外添加边距和填充。它坐得太靠右了。当我调整宽度时，它似乎卡在左侧。我该如何解决这个问题？

/* FLEXBOX */

.flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.box {
  padding: 5px;
}


/* Table and Cell for Vertical Alignment */

.table {
  display: table;
}

.cell {
  display: table-cell;
  vertical-align: middle;
}


/* SHOWCASE  */

#showcase {
  background-color: #1d2120;
  height: 100vh;
  width: 100%;
  display: table;
}

#showcase h1 {
  padding-top: 0px;
  font-family: Ubuntu;
  font-size: 4em;
  color: #da5d61;
}

#showcase h2 {
  color: #bcd5d1;
  font -family: Cairo;
  font-size: 2em;
  margin: 0 0 20px;
}

#showcase h3 {
  color: #ba9077;
  font-family: Cairo;
  font-size: 1em;
}

#inline {
  font-size: 3em;
}

#inline li {
  font-size: 1.5em;
  padding: 0 10px 0 10px;
}

@media screen and (max-width: 600px) {
  .flexbox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }
  #contact .container {
    width: 60%;
  }
}

@media screen and (max-width: 610px) {
  .flexbox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }
  #contact .container {
    width: 60%;
  }
}

<!-- SHOWCASE -->
<header id="showcase">
  <div class="cell">
    <div class="flexbox">

      <div class="box text-center">
        <h1 class="text animated pulse">Ellis Smith</h1>
        <h2><i class="fa fa-pencil" aria-hidden="true"></i> Copywriter</h2>
        <h3>Quality copy, never copied.</h3>
      </div>
      <!-- /box -->

      <nav class="box">
        <ul>
          <li>
            <a href="#services">Services</a></li>
          <li>
            <a href="#testimonials-placeholder">Testimonials</a>
            <li>
              <a href="#contact">Contact</a></li>
        </ul>
      </nav>
      <!-- /box -->
    </div>
    <!-- /flexbox -->
  </div>
  <!-- /cell -->
</header>
<!-- /showcase -->

<!--/END SHOWCASE -->

Answer 1

要在 Bootstrap 4 中处理此问题，您只需创建一个行列对并将您的内容放入列中。

如果您只有一个想要居中的列表，那么我建议对该列使用 col-auto 类（它会自动更改列的宽度以适应内容），然后添加类 mx-auto (边距水平自动）到那个。这将使列居中。

这是代码 sn-p （注意：代码 sn-p 假定您将整个东西放入 Bootstrap .container 或 .container-fluid）：

<div class="row">
    <div class="col-auto mx-auto">
        <nav class="box">
            <ul>
                <li>
                    <a href="#services">Services</a></li>
                <li>
                    <a href="#testimonials-placeholder">Testimonials</a>
                <li>
                    <a href="#contact">Contact</a></li>
            </ul>
        </nav><!-- /box -->
    </div>
</div>