Question

我正在尝试将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>

styles_test.css：

.slideshow {
    text-align: center;
}

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

正如您在上面的CSS中所看到的，我使用了两种不同的方法来使元素居中。其余的flexslider.css和jquery.flexslider.js文件可以在this website找到。这两个文件都是未修改的，我认为问题出在flexslider.css文件中。如果我错过了什么，请告诉我，因为我是新来的。感谢您提前提供的所有帮助。

Answer 1

写这个

   .slides {
        width: 100%!important;
        text-align: center;
    }
    .slides li {
         display: inline-block!important; 
        *display: inline!important; 
        float: none!important;
    }

Answer 2

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

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

Answer 3

我终于找到了问题，这很痛苦。 flexslider.css文件中有浏览器重置。因此，我必须在我自己的自定义css文件之前加载该文件。

Answer 4

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

＆＃13;

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

＆＃13;

Flexslider中心问题

4 个答案: