如何实现Slick Logo轮播组件中的图片相互居中对齐

算力阿峰

2026-10-18

不需要提前将所有图片处理为相同高度，通过CSS即可实现通用的居中对齐效果，修改方案如下：

修改核心CSS样式

替换你原有代码中.slick-slide和.slick-slide img对应的样式规则：

.slick-slide {
    margin: 0 20px;
    /* 可根据设计需求自定义统一高度 */
    height: 120px;
    /* 覆盖slick默认的display属性，flex实现居中 */
    display: flex !important;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
}

.slick-slide img {
    /* 保持图片原始比例 */
    width: auto;
    /* 宽度不超过容器 */
    max-width: 100%;
    /* 高度不超过容器 */
    max-height: 100%;
    display: block;
}

方案说明

你可以按需调整.slick-slide的height属性值，设置为你期望的轮播项统一高度即可
所有不同尺寸的logo都会自动在容器内等比缩放、居中显示，不会出现拉伸变形的问题
如果需要兼容低版本浏览器，也可以使用以下替代方案：

.slick-slide {
    margin: 0 20px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}
.slick-slide img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
}