css - 如何正确居中对齐 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 200styles.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%;等于元素宽度一半的负左边距效果最好。