0

我正在尝试在我的网站上使用 flexslider 作为轮播横幅。出于某种原因，我无法让滑块在我的网站上水平居中。我的代码如下：

HTML：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="styles_test.css">
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    $('.flexslider').flexslider({
    animation: "slide"
    });
  });
</script>
</head>

<body>
<div class="slideshow">
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="images/slideshow_preview.png" alt="Slide1"/>
            </li>
            <li>
                <img src="images/placehold.gif" alt="Slide1"/>
            </li>
            <li>
                <img src="images/placehold.gif" alt="Slide1"/>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

样式_test.css：

.slideshow {
    text-align: center;
}

.flexslider {
    width: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

正如您在上面的 CSS 中看到的，我使用了两种不同的方法来使元素居中。剩下的 flexslider.css 和 jquery.flexslider.js 文件可以在这个网站上找到。这两个文件都未修改，我认为问题出在 flexslider.css 文件中。让我知道我是否错过了什么，因为我是新来的。提前感谢您的所有帮助。

4

4 回答 4

4

写这个

   .slides {
        width: 100%!important;
        text-align: center;
    }
    .slides li {
         display: inline-block!important; 
        *display: inline!important; 
        float: none!important;
    }
于 2014-02-26T19:16:56.543 回答
2

@the.big.lebowski 您的解决方案就像一个魅力！

提示：添加 .flexslider{white-space: nowrap;} 以避免在窗口调整大小时堆叠 li。

于 2014-09-25T07:17:46.513 回答
0

我终于弄清楚了这个问题，而且非常明显。flexslider.css 文件中有浏览器重置。因此，我必须在我自己的自定义 css 文件之前加载该文件。

于 2013-07-20T16:25:38.333 回答
0

基于 the.big.lebowski 和 gopalraju 的答案，这对我有用。

  // Center the slides.
  .slides {
    width: 100% !important;
    text-align: center;
    li {
      white-space: initial;
      width: 100%;
      display: inline-block !important;
      float: none !important;
      vertical-align: top;
    }
  }

于 2015-11-05T21:59:38.600 回答