如何在 Magento 中正确居中对齐横幅滑块？答案

【问题标题】：How To Correctly Center Alignt a Banner Slider in Magento?如何在 Magento 中正确居中对齐横幅滑块？
【发布时间】：2013-01-21 16:55:55
【问题描述】：

我正在尝试使横幅滑块居中对齐，但未正确居中。如果我更改 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>

【问题讨论】：

标签： css magento slider banner

【解决方案1】：

首先，您没有理由在滑块上使用绝对定位。如果您将滑块移到代码层次结构的顶部，它会很好地位于内容之上。

话虽如此，要使用您当前的代码结构修复它，您可以执行以下操作。

在你的styles.cssline 200 上添加position: relative 到.page
将margin-left 更改为20px 为#slider

这应该将您的滑块正确定位在页面的中心。

【讨论】：

【解决方案2】：

用<div class='slide-container'> 之类的东西包裹滑块并使用：

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

有时margin: 0 auto; 就足够了，但我发现使用left: 50%; 和负左边距等于元素宽度的一半效果最好。

【讨论】：