【问题标题】: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】:

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

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

    1. 在你的styles.cssline 200 上添加position: relative.page

    2. margin-left 更改为20px#slider

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

    【讨论】:

      【解决方案2】:

      &lt;div class='slide-container'&gt; 之类的东西包裹滑块并使用:

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

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-06-11
        • 1970-01-01
        • 2019-02-14
        相关资源
        最近更新 更多