如何正确居中对齐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. 在position: relative

的.page上将line 200添加到styles.css

2. 将margin-left

更改为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%;左边距为负的边距等于元素宽度的一半效果最佳。