如何垂直对齐 CSS 列的内容？答案

【问题标题】：How to vertically align CSS columns content?如何垂直对齐 CSS 列的内容？
【发布时间】：2020-04-14 02:20:07
【问题描述】：

我正在尝试使用 CSS 列构建一个带有无序列表的简单布局，因此如果列表中的项目太多，我可以将其内容组织成两列，到目前为止，我能够让它工作像这样：

.slide {
  width: 874pt;
  height: 492pt;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #000;
  background-color: #FFF;
}

ul.product-list {
  position: absolute;
  height: 100%;
  left: 10%;
  list-style-type: none;
  padding: 0;
  margin: 0;
  -webkit-columns: 2;
  columns: 200px auto;
}

ul.product-list li.product-item {
  display: flex;
  align-items: center;
  break-inside: avoid;
}

ul.product-list li.product-item:not(:last-child) {
  margin-bottom: 10px;
}

ul.product-list li.product-item img {
  border-radius: 50%;
  margin-right: 10px;
  width: 74px;
  height: 74px;
}

<section class="slide">
  <div class="content">
    <ul class="product-list">
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
    </ul>
  </div>
</section>

但是，我试图让列表在只有几个项目时垂直对齐在容器的中心，所以它看起来像这样：

.slide {
  width: 874pt;
  height: 492pt;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #000;
  background-color: #FFF;
}

.content {
  display: flex;
  align-items: center;
  height: 100%;
}

ul.product-list {
  position: absolute;
  left: 10%;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.product-list li.product-item {
  display: flex;
  align-items: center;
  break-inside: avoid;
}

ul.product-list li.product-item:not(:last-child) {
  margin-bottom: 10px;
}

ul.product-list li.product-item img {
  border-radius: 50%;
  margin-right: 10px;
  width: 74px;
  height: 74px;
}

<section class="slide">
  <div class="content">
    <ul class="product-list">
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
    </ul>
  </div>
</section>

由于列表的内容会动态填充，我希望它们在容器的中心保持对齐，这可以通过这个标记和 css 列实现吗？如果没有，什么是让这个布局工作的好方法？

【问题讨论】：

我认为你必须使用表格元素来实现垂直对齐
在每个元素上使用固定高度。例如：高度：5vh；宽度：5vh;
@Stanley 我没有关注，你的意思是把它添加到每个 .product-item?
你为什么使用绝对位置？
@ZiadDarwich 因为在实际文档中我在.slide 容器中有另一个元素，在这种情况下绝对位置是否存在问题？

标签： html css css-multicolumn-layout

【解决方案1】：

更改 flex 方向并将 flex 添加到蓝色容器

.slide {
    width: 100vw;
    height: 500px;
    margin: 0 auto;
    background-color: rgb(163, 163, 163);
  }
  
  
    
    ul.product-list li.product-item {
        display: flex;
        align-items: center;
        break-inside: avoid;
    }
    
    ul.product-list li.product-item:not(:last-child) {
        margin-bottom: 10px;
    }
    
    ul.product-list li.product-item img {
        border-radius: 50%;
        margin-right: 10px;
        width: 74px;
        height: 74px;
    }

ul.product-list {
    list-style-type: none;
    width: 80vw;
    border: 2px solid blue;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.content {
    display: flex;
    height: 100%;
    width: 90vw;
    border: 3px solid red;

    margin: 0 auto;
}

.product-item {

    border: 3px solid lime;
    padding: 1vh 1vw;
}

<section class="slide">
    <div class="content">
      <ul class="product-list">
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="slide">
    <div class="content">
      <ul class="product-list">
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>

【讨论】：

这确实工作正常，试图查看是否可以使用 CSS Columns 来完成它，但它解决了我的问题，所以我会检查它是否正确并添加我自己的答案，因为对于可能想要采用相同方法的人，我设法使用 CSS Columns 而不使用 Flexbox 来做到这一点 :)
@IvanS95 太棒了！一个问题，多种方法，更多答案！

【解决方案2】：

以下 css 应该满足您的要求：

    .slide {
      width: 874pt;
      height: 492pt;
      margin: auto;
      border: 1px solid #000;
      background-color: #FFF;
    }

    ul.product-list {
      list-style-type: none;
      display: flex;
      flex-flow: column;
      flex-wrap: wrap;
      align-items: center;
      height: 500px;
    }

    ul.product-list li.product-item {
      margin-bottom: 10px;
    }

    ul.product-list li.product-item img {
      border-radius: 50%;
      margin-right: 10px;
      width: 74px;
      height: 74px;
    }

确保将 content 类应用于 ul 元素。这是stackblitz example

【讨论】：

我需要包装 div，我会在问题中添加更多详细信息，问题是我有这个 .slide，它有一个标题，然后是标题右侧的列表，所以我'我已经在使用 flexbox 来垂直对齐这两件事了
你可以嵌套弹性盒。另一个问题是绝对位置。我设法让它工作检查更新的答案和 stackblitz 示例

【解决方案3】：

这是在无序列表元素中仅使用 CSS 列 的替代解决方案，在这种情况下，列中的项目在顶部对齐，但列表本身保持垂直居中，同时添加更多项目.

* {
  box-sizing: border-box;
}

.slide {
  width: 874pt;
  height: 492pt;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #000;
  background-color: #FFF;
}

.content {
  display: flex;
  align-items: center;
  height: 100%;
}

ul.product-list {
  position: absolute;
  min-height: fit-content;
  max-height: 100%;
  left: 10%;
  list-style-type: none;
  padding: 35px 0;
  margin: 0;
  -webkit-columns: 2;
  columns: 200px auto;
}

ul.product-list li.product-item {
  display: flex;
  align-items: center;
  break-inside: avoid;
}

ul.product-list li.product-item:not(:last-child) {
  margin-bottom: 10px;
}

ul.product-list li.product-item img {
  border-radius: 50%;
  margin-right: 10px;
  width: 74px;
  height: 74px;
}

<section class="slide">
  <div class="content">
    <ul class="product-list">
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
    </ul>
  </div>
</section>

<section class="slide">
  <div class="content">
    <ul class="product-list">
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
    </ul>
  </div>
</section>

【讨论】：