【问题标题】:How to center slider in css?如何在css中居中滑块?
【发布时间】:2012-06-10 10:56:07
【问题描述】:

我在一个主题上安装了这个插件。这个主题有一个滑块,但我不喜欢它。所以我安装了这个。

http://wordpress.org/extend/plugins/content-slide/

我试过用这个

#wpcontent_slider_container{
position:relative;
margin: 0 auto;
}

还有这个

#wpcontent_slider_container{
position:relative;
margin-left:auto;
margin-right:auto;
}

然后什么也没有发生。

我必须在 div 中放一些东西吗?

【问题讨论】:

  • 你想把这个#wpcontent_slider_container或#wpcontent_slider_container中的内容居中
  • 这就是我想要的样子 dodaj.rs/f/2x/Ay/39nHZAWw/slider-center.jpg
  • 尝试用 jsfiddle 重现问题,这样我们就可以编辑 fiddle 并修复它。 css 应该是 width:x, margin:10px auto;并且父母也应该有一个宽度,也许是 float:left;

标签: css wordpress slider center


【解决方案1】:

改变宽度

#wpcontent_slider_container{
    width: 500px;
    margin:0 auto;
}

【讨论】:

  • 尝试#wpcontent_slider_container{position:absolute;左边距:Xpx;边距顶部:Xpx; } ...
  • 再次相同。另外我在css中没有任何其他绝对位置。
【解决方案2】:

我遇到了同样的问题。我就是这样解决的:

#wpcontent_slider_container {
margin-left: auto !important;
margin-right: auto !important;
}

#wpcontent_slider {
/* Your styling here */
}

没有“!重要”的东西,CSS 对我也不起作用。

【讨论】:

    【解决方案3】:

    #wpcontent_slider_container's父元素中添加

    text-align:center;
    

    居中对齐您的#wpcontent_slider_container

    【讨论】:

    • 我尝试了所有的建议,但没有任何反应。我做错了什么?
    【解决方案4】:

    如果您知道滑块的宽度,那么当中心对齐很顽固时,这里有一个对我有用的小修复。

    #sliderDiv{
       position:relative;
       left:50%;
       margin-left:-(half the width of the div);
      (ex. if div is at 500px it would be margin-left:-250px;)
     }
    

    它不漂亮,但它有效。不过,您可能必须隐藏外部容器的水平溢出。

    【讨论】:

      【解决方案5】:
      #wpcontent_slider_container{
      text-align: center;
      }
      

      或使用<center>标签

      【讨论】:

      • 我尝试了所有的建议,但没有任何反应。我做错了什么?
      • 这是现场项目吗?过去的链接在这里
      【解决方案6】:

      我终于可以解决我网页中的滑块 ubication 的问题了。

      只需修改style.css.main_img { float:left; margin:15px 10px 0 60px},更改值即可。

      【讨论】:

        【解决方案7】:

        在 auto !important 上使用 'margin-right' 和 'margin-left' 也对我有用。即使不使用 !important 命令,它实际上也可以工作。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2021-12-17
          • 1970-01-01
          相关资源
          最近更新 更多