如何在光滑的滑块中垂直对齐图片？

Question

有一个问题，我正在尝试垂直对齐滑块中的图片，因为它们粘在顶部边缘。我尝试将容器设置为显示：表格单元格和垂直对齐：中间，但它不起作用。

这是我的结构：

<div class="slider-container">
      <div class="multiple-items">
        <div>
          <img src="assets/img1.png" />
        </div>
        <div>
          <img src="assets/img2.png" />
        </div>
        <div>
          <img src="assets/img3.png" />
        </div>
        <div>
          <img src="assets/img4.png" />
        </div>
        <div>
          <img src="assets/img5.png" />
        </div>
      </div>
    </div>

还有css：

.slider-container {
  border: 5px solid #fff;
  max-height: 100px;
  max-width: 700px;
  margin: 0 auto 10px;
}
.slider-box {
  position: relative;
}

.multiple-items div {
  vertical-align: middle;
}

p.s.：我无法将我的代码设置为 sn-p（因为代码比我的问题长），所以有指向codesandbox的链接

Answer 1

使用display: flex。
将align-items属性设置为center时，可以获得垂直对齐的items。

.multiple-items div {
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
}