Flexslider 居中问题答案

【问题标题】：Flexslider Centering IssueFlexslider 居中问题
【发布时间】：2015-11-06 05:59:38
【问题描述】：

我正在尝试在我的网站上使用 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 文件中。让我知道我是否错过了什么，因为我是新来的。提前感谢您的所有帮助。

【问题讨论】：

尝试将width: 100%; 添加到.slideshow
完全没有变化。

标签： jquery css slider carousel flexslider

【解决方案1】：

写这个

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

【讨论】：

【解决方案2】：

@the.big.lebowski 您的解决方案非常有效！

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：