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

Question

出现问题，我正在尝试使滑块垂直对齐图片，因为它们粘在顶部边缘。我尝试将容器设置为 display: tabble cell 和 vertical-align: middle 但它不起作用。

这是我的结构：

<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.: 我无法将我的代码设置为片段（因为代码比我的问题长），所以有 link 到 codesandbox

Answer 1

使用display: flex.
当设置align-items 属性为center时，可以得到垂直对齐的项目。

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

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

How to align pictures verticaly in slick slider?

css

jquery

slick