图像未在光滑轮播的中心对齐

Question

因此，我决定使用 slick carousel 在我正在构建的网站上制作轮播，轮播有效，但我无法获得图像在旋转木马的中心对齐并填充页面（如果这有意义？）。我在网络开发方面仍然很陌生，所以我确定我遗漏了一些东西。无论如何，这是我的代码....

HTML：

<!doctype html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="style.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <meta charset="utf-8">
 </head>
 <body>
 <main id="mainContent" role="main">
 <article role="article">
    <section>
        <header id="carousel">
            <div class="container">
                <div class="single-item-rtl" dir="rtl">
                    <div><img src="img/6.jpg" height="500px" width:"1500px" align= center/></div>
                    <div><img src="img/7.jpg"height="500px" width:"1500px" align= center/></div>
                    <div><img src="img/8.JPG" height="500px" width:"1500px" align= center/></div>
                    <div><img src="img/9.jpg" height="500px" width:"1500px" align= center/></div>
                </div>
            </div>
        </header>
    </section>
</article>
</main>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">      </script>
<script type "text/javascript" src="http://code.jquery.com/jquery-migrate- 1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.single-item-rtl').slick({
        rtl: true,
        autoplay: true,
        autoplaySpeed: 3000,
    });
});
</script>
</body>
</html>

CSS:

@font-face {
font-family: "Brandon Grotesque";
src: url("fonts/Brandon_Grotesque/Brandon_reg.otf") format("opentype");
}

html, body {
  height: 100%;
  width: 100%;
  padding:0;
  margin: 0;
}

body {
  font-family:"Brandon Grotesque";
}

#mainContent {
  background: #e8e8e8;
}

.container {
  width: 1500px; 
  height:600px;      
  margin: auto; 
}

我用该代码得到的是这个--->http://imgur.com/YiB3Na3。谁能向我解释一下我想念的是什么？最好不要嘲笑我 ;) 谢谢！！！

Answer 1

您的 <img/> 标记存在语法错误，例如 <img src="img/6.jpg" height="500px" width:"1500px" align= center/>.

应该是<img src="img/6.jpg" height="500" width="1500" align= center/>。请注意 = 而不是 :。

另请注意，width 和 height 属性不带单位。您可能想使用 CSS 属性指定维度，在这种情况下，您的标记看起来像 <img src="img/6.jpg" style="height:500px;width:1500px;text-align:center" />

Answer 2

考虑将此 CSS 添加到 .slick-track class:

.slick-track {
  margin: 0 auto;
}

Answer 3

为每张图片设置 margin-left 和 margin-right auto。

<img src="..." style="margin-left: auto; margin-right: auto">

图像未在光滑轮播的中心对齐

Images not aligning in the center of slick carousel

html

css

jquery