居中 bxslider jquery 插件答案

【问题标题】：Centering bxslider jquery plugin居中 bxslider jquery 插件
【发布时间】：2011-12-12 00:19:38
【问题描述】：

我无法在我的 html 页面中将 bxslider 插件居中。

这是我的 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Everry - Customise Now Proto</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script src = "js/jquery.bxSlider.min.js"></script>
    <script>
      $(document).ready(function(){
             $('#slider1').bxSlider();
          });
    </script>

</head>
<body>
<h1>Customise Now Prototype</h1>
<div align = "center" id="slider1">
  <div>Slide one content</div>
  <div>Slide two content</div>
  <div>Slide three content</div>
  <div>And so on...</div>

</div>
</body>
</html>

还有我的 CSS：

body{
    background-color: #fff;
    margin: 0; 
    padding: 0; 
    text-align: center; 
}

#slider1 {
    width: 700px;
    height: 350px;
    margin: 0 auto;
    liststyle: none;
}

但它似乎偏离了中心。这是网址：

http://everry.com/new/customise/customisenow.html

我不知道为什么？

【问题讨论】：

标签： jquery html css slider

【解决方案1】：

#bx-wrapper  {margin:0 auto; width:700px;}

滑块插件可以转换 HTML，所以不要使用滑块容器来居中 :)

【讨论】：

这似乎不再起作用了。宽度样式作为内联样式添加。它快把我逼疯了。我不想使用!important。还有其他方法吗？
你能给一个演示的链接吗...你应该仍然可以在它之外创建一个容器:)
注意：CSS 应该始终在外部 CSS 样式表中实现，而不是在文档正文中实现，如 bxslider site中所述

【解决方案2】：

您必须覆盖愚蠢的计算边距和宽度。这个插件很棒，但他们的实现和文档很草率。只需在我有 940 的地方插入您的图像宽度，这应该可以解决您的“偏离中心”问题。

.bx-wrapper, .bx-window {
    margin:0 auto; width:940px !important;
}

.pager{
    width:940px !important; 
}

#slider1 li{
    margin-left:0px !important;
}

【讨论】：