将两个div居中并水平对齐，然后在较小的屏幕上垂直对齐

Question

我基本上有两个并排的列表，我希望它们在其容器内居中。我无法复制div周围的所有代码，因为HTML文件非常大且令人费解，因此在它之前有一百万个空格。它不能正确复制/粘贴。

<div style="padding-right:0px; padding-left:0px; overflow:auto; width: 100%; margin:0 auto; max-width:400px; display:inline-block;">
  <div style="float:left;">
    <ul>
      <li>On-demand tutoring</li>
      <li>Library systems</li>
      <li>Dedicated support teams</li>
    </ul>
  </div>

  <div style="float:right;">
    <ul>
      <li>Counseling</li>
      <li>Technical support</li>
    </ul>
  </div>

</div>

Answer 1

<div style="padding-right:0px; padding-left:0px; overflow:auto; width: 100%; margin:0 auto; max-width:400px; display:inline-block;">
    <div style="float:left;text-align:center;">
        <ul>
            <li>On-demand tutoring</li>
            <li>Library systems</li>
            <li>Dedicated support teams</li>
        </ul>
    </div>

    <div style="float:right;text-align:center;">
        <ul>
            <li>Counseling</li>
            <li>Technical support</li>
        </ul>
    </div>
</div>

将您当前的能源部更改为此，这足以满足您的需求。

Answer 2

您可以将列表保留在一个ul元素中，并在其上使用column-count: 2;将其分为几列。使用容器上的margin: 0 auto;进行居中。我删除了不必要的div之间的内容，并将内联CSS移到了外部样式表。

对于较小的屏幕，使用媒体查询将column-count设置为1：

.container {
  width: 100%;
  margin: 0 auto;
  max-width: 400px;
}

.list1 {
  column-count: 2;
}

@media screen and (max-width: 400px) {
  .list1 {
    column-count: 1;
  }
}

<div class="container">
  <ul class="list1">
    <li>On-demand tutoring</li>
    <li>Library systems</li>
    <li>Dedicated support teams</li>

    <li>Counseling</li>
    <li>Technical support</li>
  </ul>
</div>