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; 
}

我得到的代码是这个---＆gt; http://imgur.com/YiB3Na3。任何人都可以向我解释一下，我错过了什么？最好不要嘲笑我;）谢谢!!!

Answer 1

考虑将此CSS添加到.slick-track类：

.slick-track {
  margin: 0 auto;
}

Answer 2

您的<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 3

为每个图像设置margin-left和margin-right auto。

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

图像未在光滑的转盘中心对齐

3 个答案: