Html slick.js图像滑块垂直居中显示图像_Html_Css_Slick.js

Html slick.js图像滑块垂直居中显示图像

html css

Html slick.js图像滑块垂直居中显示图像,html,css,slick.js,Html,Css,Slick.js,我有一个非常基本的slick.js图像滑块。我设法使包装内的图像水平居中，但无法垂直居中。它在桌面视图上工作，但当我在移动视图上尝试时，站着的图片完美地保留在中间，而躺着的图片保留在页面顶部。我想让说谎的照片垂直居中我的代码： index.html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <

我有一个非常基本的slick.js图像滑块。我设法使包装内的图像水平居中，但无法垂直居中。它在桌面视图上工作，但当我在移动视图上尝试时，站着的图片完美地保留在中间，而躺着的图片保留在页面顶部。我想让说谎的照片垂直居中

我的代码：

index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gallery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/slick.css" />
    <link rel="stylesheet" href="./css/galleryStyle.css" />
  </head>
  <body>
    <div class="banner-slider-wrapper">
      <div class="banner-slider">
        <div><img src="./img/20200704-DSC03331.jpg" alt="" /></div>
        <div><img src="./img/20200704-DSC03906.jpg" alt="" /></div>
        <div><img src="./img/zsofiéspisti_kreativ-09715.jpg" alt="" /></div>
      </div>
      <script src="./js/slick.js"></script>
    </div>
    <script>
      $('.banner-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        infinite: true,
        //tosolve
        arrows: false,
      });
    </script>
  </body>
</html>

您可以使用

css flex

在滑块中对齐图像

$（'.banner滑块'）。光滑({
幻灯片放映：1，
幻灯片滚动：1，
自动播放：对，
自动播放速度：2000，
无限：是的，
箭头：假
});
正文{
填充：0；
保证金：0；
身高：100%；
}
* {
框大小：边框框；
}
img{
最大宽度：70%；
显示：内联块；
左边距：自动；
右边距：自动；
垂直对齐：中间对齐；
最高：50%；
}
.横幅滑块{
最高：50%；
垂直对齐：中间对齐；
}
.横幅滑块.光滑上{
位置：绝对位置；
左：30px；
最高：100%；
}
.横幅滑块.下一步滑溜{
位置：绝对位置；
右：30px；
最高：100%；
}
.横幅滑块包装{
/*背景图像：url（'../img/gallery background.jpeg'）*/
背景：#cda；
最大高度：1000px；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
边缘顶部：10px；
}
.光滑的幻灯片：聚焦{
大纲：无；
}
/*解决方案*/
.横幅滑块.平滑轨迹{
显示器：flex；
对齐项目：居中；
}


body {
  padding: 0;
  margin: 0;
  height: 100%;
}
* {
  box-sizing: border-box;
}
img {
  max-width: 70%;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
  top: 50%;
}

.banner-slider {
  top: 50%;
  vertical-align: middle;
}

.banner-slider .slick-prev {
  position: absolute;
  left: 30px;
  top: 100%;
}
.banner-slider .slick-next {
  position: absolute;
  right: 30px;
  top: 100%;
}

.banner-slider-wrapper {
  /* background-image: url('../img/gallery-background.jpeg'); */
  background: white;
  max-height: 1000px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 100px;
}