如何垂直对齐CSS列内容？

Question

我正在尝试使用 CSS 列构建一个带有无序列表的简单布局，这样如果列表中的项目太多，我可以将其内容组织在两列中，到目前为止，我能够将其组织为两列像这样工作：但是，我试图使列表在只有几个项目时在容器的中心垂直对齐，所以它看起来像这样：.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 类应用到 ul 元素。这是一个stackblitz 示例

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>