Javascript Slick.js如何在旋转木马的中心对齐图像？

默认情况下，图像在左侧对齐。使用设置

centerMode:true

将图像从左侧对齐几个像素，并从右侧查看下一个图像的边缘，如图所示：

以下是使用的设置：

for (var i in data.image_set) {
    sc.append('<div><img src="' + data.image_set[i].image + '" height="' + data.image_set[i].height + '" width="' + data.image_set[i].width + '"></div>');
}
sc.slick({
    dots: true,
    speed: 150,
    centerMode: true
});

.sc img{
高度：计算（50vh-100px）；
宽度：自动；
}

$（文档）.ready（函数（）{
$（'.sc'）。光滑({
点：是的，
速度：150，
centerMode:正确
});
});
.sc img{
高度：计算（50vh-100px）；
宽度：自动；
边距：0自动；/*它使任何块级元素居中*/
}
问题来自这样一个事实，即每个单独的幻灯片都是一个自动跨越旋转木马宽度的div，但图像不会完全填充div，并且默认情况下，在其容器内保持对齐。尝试在您的样式中添加类似的内容：

.sc div { text-align: center; }
.sc img { margin: auto; }

有类似的问题，当所有的IMG没有相同的高度时，它们没有对齐到滑块中：
在“slick.css”中找到
.slick track
，将
显示更改为
flex
并添加
对齐项目：居中

链接到live code，或者你可以分享工作提琴吗？同一页上有很多其他不相关的东西，我会尝试制作一个最小版本hold OnOne，更新OP，这段代码会产生相同的效果，唯一的区别是全页而不是在引导引导中。与IMG <代码>高度> /代码>和宽度>代码>没有区别，如果在CSS中添加<代码>空白：0自动< /代码>，则它自动将中间的图像对齐。谢谢：）你是怎么知道的，我有没有办法自己从文件中找到答案。？我的意思是slick.js文档中没有任何css，但这似乎是很多人都会使用的基本功能…它是css的基础！我只是在浏览器上试用了一下，效果很好。我从来没有真正坐下来学习CSS lol，边走边学：）最后一个问题，在
0 auto
中，
0
做什么？编辑：抱歉，我刚从另一个问题lol中找到它，
将auto指定为第二个参数基本上告诉浏览器自动确定左右边距本身，这是通过将它们设置为相等来实现的。它保证将左右边距设置为相同的大小。第一个参数0表示上下页边距都将设置为0。
@DavidTan即使我什么也没学到，一切都在进行中！：）<代码>边距：0自动
-等于：
边距：0自动0自动
，可以读作：
页边距：右上-左下
，简而言之：
页边距：左上-右下这比另一个答案更有意义。但只是一个小细节，我刚刚检查了W3S，他们说顺序是右上下左？编辑：哎呀，我现在明白你在最后一部分的意思了，明白了！谢谢啊，好的，所以基本上，
margin:auto
给出了图像的左右边距，使其均匀地位于所述div的中心，对吗？这里，
margin:auto
的意思是，
margin:auto它将
自动
值应用于所有方面。