如何垂直对齐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 {&nbsp; &nbsp; width: 100vw;&nbsp; &nbsp; height: 500px;&nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; background-color: rgb(163, 163, 163);&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; ul.product-list li.product-item {&nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; &nbsp; break-inside: avoid;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; ul.product-list li.product-item:not(:last-child) {&nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 10px;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; ul.product-list li.product-item img {&nbsp; &nbsp; &nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; &nbsp; &nbsp; margin-right: 10px;&nbsp; &nbsp; &nbsp; &nbsp; width: 74px;&nbsp; &nbsp; &nbsp; &nbsp; height: 74px;&nbsp; &nbsp; }ul.product-list {&nbsp; &nbsp; list-style-type: none;&nbsp; &nbsp; width: 80vw;&nbsp; &nbsp; border: 2px solid blue;&nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; flex-wrap: wrap;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;}.content {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; width: 90vw;&nbsp; &nbsp; border: 3px solid red;&nbsp; &nbsp; margin: 0 auto;}.product-item {&nbsp; &nbsp; border: 3px solid lime;&nbsp; &nbsp; padding: 1vh 1vw;}<section class="slide">&nbsp; &nbsp; <div class="content">&nbsp; &nbsp; &nbsp; <ul class="product-list">&nbsp; &nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; </section>&nbsp; <section class="slide">&nbsp; &nbsp; <div class="content">&nbsp; &nbsp; &nbsp; <ul class="product-list">&nbsp; &nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; &nbsp; </li>

Answer 2

以下 css 应该满足您的要求：&nbsp; &nbsp; .slide {&nbsp; &nbsp; &nbsp; width: 874pt;&nbsp; &nbsp; &nbsp; height: 492pt;&nbsp; &nbsp; &nbsp; margin: auto;&nbsp; &nbsp; &nbsp; border: 1px solid #000;&nbsp; &nbsp; &nbsp; background-color: #FFF;&nbsp; &nbsp; }&nbsp; &nbsp; ul.product-list {&nbsp; &nbsp; &nbsp; list-style-type: none;&nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; flex-flow: column;&nbsp; &nbsp; &nbsp; flex-wrap: wrap;&nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; height: 500px;&nbsp; &nbsp; }&nbsp; &nbsp; ul.product-list li.product-item {&nbsp; &nbsp; &nbsp; margin-bottom: 10px;&nbsp; &nbsp; }&nbsp; &nbsp; ul.product-list li.product-item img {&nbsp; &nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; &nbsp; margin-right: 10px;&nbsp; &nbsp; &nbsp; width: 74px;&nbsp; &nbsp; &nbsp; height: 74px;&nbsp; &nbsp; }确保将&nbsp;content&nbsp;类应用到&nbsp;ul&nbsp;元素。这是一个stackblitz 示例

Answer 3

这是在无序列表元素中仅使用&nbsp;CSS 列&nbsp;的替代解决方案，在这种情况下，列中的项目在顶部对齐，但在添加更多项目时列表本身保持垂直居中。* {&nbsp; box-sizing: border-box;}.slide {&nbsp; width: 874pt;&nbsp; height: 492pt;&nbsp; position: relative;&nbsp; margin: 0 auto;&nbsp; overflow: hidden;&nbsp; border: 1px solid #000;&nbsp; background-color: #FFF;}.content {&nbsp; display: flex;&nbsp; align-items: center;&nbsp; height: 100%;}ul.product-list {&nbsp; position: absolute;&nbsp; min-height: fit-content;&nbsp; max-height: 100%;&nbsp; left: 10%;&nbsp; list-style-type: none;&nbsp; padding: 35px 0;&nbsp; margin: 0;&nbsp; -webkit-columns: 2;&nbsp; columns: 200px auto;}ul.product-list li.product-item {&nbsp; display: flex;&nbsp; align-items: center;&nbsp; break-inside: avoid;}ul.product-list li.product-item:not(:last-child) {&nbsp; margin-bottom: 10px;}ul.product-list li.product-item img {&nbsp; border-radius: 50%;&nbsp; margin-right: 10px;&nbsp; width: 74px;&nbsp; height: 74px;}<section class="slide">&nbsp; <div class="content">&nbsp; &nbsp; <ul class="product-list">&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; </div></section><section class="slide">&nbsp; <div class="content">&nbsp; &nbsp; <ul class="product-list">&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="product-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/60" alt="">&nbsp; &nbsp; &nbsp; &nbsp; <span>Item</span>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; </div></section>