css - 如何居中光滑的旋转木马图像？

Question

我正在尝试将我光滑的轮播图片居中。我用过 margin: 0 auto;并定义了宽度，但它仍然偏离中心，如图所示

这是我的笔 https://codepen.io/SashaSashaSasha/pen/MWgepEe

任何人都可以帮我解决这个问题吗

.carousel {  
  max-height:100%; 
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  display: block;
}

.carousel div {  
  width:100%; 
  height: 100%;  
}

.carouselWrapper {
    margin: 80px 0px 40px 0px;
    height: 80vh;
    max-width: 100%;
    display: block;

}

.slick-slide{
  margin: 0px auto;
  display: block;
}

.slick-slide img{
  max-width:100% ;
  max-height:100%;
  object-fit: contain;
  display: block;
 margin: 0px auto;
}

Answer 1

光滑的容器上有多余的填充物。尝试将其包含在您的 CSS 样式中

.slick-list.draggable 
{    
padding: 0px 0px !important;
}