如何正確居中對齊Magento中的橫幅滑塊？

Question

我想中心對齊橫幅滑塊，但它沒有正確居中。它只在我的屏幕上居中，如果我更改margin-left屬性以匹配我的屏幕分辨率。但它並沒有集中在更大的屏幕上。我的網站是myusedwheel.com，這是我有它的代碼：

所有的

<style type="text/css"> 
#slider{ 
    margin-left: 195px !important; 
    overflow: hidden; 
    position: absolute; 
    top: 192px; 
    width:960px!important; 
    height:173px !important; 
} 

#navigation{ 
    position:relative; z-index:999; 
} 

.header-container{ 
    height:385px; 
} 

#controls{ 
    display:none; 
} 
</style> 

Answer 1

首先，沒有任何理由讓你使用你的滑塊絕對定位。如果您將滑塊移動到代碼層次的頂部，它將在內容上方保持良好。

就這麼說，要解決它與您當前的代碼結構，您可以執行以下操作。

1. 在styles.css

2. 變化margin-left添加position: relative到.page上line 200到20px爲#slider

此頁面的中心應正確定位你的滑塊。

Answer 2

包裹的東西，如<div class='slide-container'>和使用滑塊：

.slide-container { 
    position: relative; 
    width: 1200px; 
    height: 400px; 
    left: 50%; 
    margin-left: -600px; 
} 

有些時候margin: 0 auto;是足夠了，但我發現，使用left: 50%;帶負左邊距等於一半的元素的寬度效果最好。