如何垂直对齐 CSS 列内容？

Question

我正在尝试使用 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 列来实现？如果不是，有什么好的方法可以使此布局正常工作？

Answer 1

改变弯曲方向并向蓝色容器添加弯曲

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

Answer 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 class 应用于 ul 元素。这是一个stackblitz example

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

如何垂直对齐 CSS 列内容？

How to vertically align CSS columns content?

html

css

css-multicolumn-layout