居中bxslider jquery插件

我有困難在我的html頁面中心bxslider插件居中。居中bxslider jquery插件

這裏是我的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

我不知道爲什麼？

來源

2011-10-20 user559142

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

滑塊插件轉換你的HTML，所以不要使用滑塊容器中心:)

來源

2011-10-20 18:07:36

這似乎不工作了。寬度樣式被添加爲線內樣式。這讓我瘋狂。我不想用'！important'。有另一種方法嗎？ – rgin

你可以給一個演示的鏈接...你應該仍然可以在它之外創建一個容器:) –

注意：CSS應該總是在外部CSS樣式表中實現，而不是在文檔正文中實現，正如在bxslider中通知的那樣[站點]（http://bxslider.com/examples/thumbnail-pager-2） – stom

你必須重寫愚蠢計算利潤和寬度。這個插件非常棒，但它們的實現和文檔都很sl sl。只需將圖像寬度插入940以下的位置，這可以解決您的問題，即「偏離中心」問題。

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

.pager{ 
    width:940px !important; 
} 

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

來源

2011-12-07 02:23:28

居中bxslider jquery插件

回答

相關問題