如何在slick slider轮播组件中实现图片垂直居中对齐

解决方案 #

你之前的样式不生效有两个核心原因：

1. 属性拼写错误：你尝试写的display: tabble cell是错误写法，正确为display: table-cell
2. Slick初始化后会自动给轮播项添加浮动属性，破坏了vertical-align的生效前提，需要覆盖默认样式

方案1：Flex布局（推荐，兼容性好写法简单）

修改CSS如下：

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

.multiple-items .slick-slide {
  display: flex;
  align-items: center;
  /* 若需要同时水平居中可新增以下属性 */
  /* justify-content: center; */
  height: 100px;
}

.multiple-items .slick-slide img {
  max-height: 90px;
  width: auto;
}

方案2：Table布局（兼容低版本IE）

修改CSS如下：

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

.multiple-items .slick-slide {
  display: table-cell;
  vertical-align: middle;
  height: 100px;
  float: none; /* 必须添加，覆盖Slick默认的浮动属性 */
}

.multiple-items .slick-slide img {
  max-height: 90px;
  width: auto;
}

内容的提问来源于stack exchange，提问作者JOKER