How to align pictures verticaly in slick slider?-CodePudding

There's a problem, I'm trying to align pictures in slider verticaly, because they stick to the top edge. I tried to set container to display: tabble cell and vertical-align: middle but it doesn't work.

There is my structure:

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

And 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.: I can't set my code into snippet (because code is longer than my question), so there is link to codesandbox

CodePudding user response：

Use display: flex.
When setting align-items property as center, you can get vertically aligned itmes.

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