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

Question

我基本上有两个并排的列表，我希望它们在容器中居中。我无法复制 div 周围的所有代码，因为它前面有一百万个空格，因为 HTML 文件非常大且复杂。它不会与 copy/paste.

正确复制

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

将您当前的 doe 更改为此，这应该足以满足您的需求。

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>

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

Center and horizontally align two divs, and then vertically align on smaller screen

html

css

center