如果列数为 2，则将最后一个 li 元素居中

Question

我想为移动分辨率制作页脚。如果一行中只有一个元素，我想将它居中 - 我可以使用 ul li 实现吗？我的最后一个元素左对齐，这是我不想要的，我应该使用 ul li 以外的东西吗？

.body {
  max-width: 320px;
  width: 100%;
  background: red;
}

ul {
  column-count: 2;
  padding: 0;
}

ul li {
  list-style: none;
  text-align: center;
}

<div class="body">
  <ul>
    <li>testdwad dada ad ad </li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</div>

Answer 1

您可以通过以下设置使用 flexbox（另请注意列表元素的 width 定义）

.body {
  max-width: 320px;
  width: 100%;
  background: red;
}

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
}

ul li {
  list-style: none;
  text-align: center;
  width: 50%;
}

<div class="body">
  <ul>
    <li>testdwad dada ad ad </li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</div>

如果列数为 2，则将最后一个 li 元素居中

Center last li element if column count is 2

html

css

css-multicolumn-layout