如何在CSS中居滑块?

时间:2012-06-06 12:13:14

标签: css wordpress slider center

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

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中吗?

7 个答案:

答案 0 :(得分:2)

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

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

#wpcontent_slider {
/* Your styling here */
}

没有“!important”的东西,CSS对我来说也不起作用。

答案 1 :(得分:1)

更改宽度

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

答案 2 :(得分:1)

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

#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;)
 }

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

答案 3 :(得分:0)

#wpcontent_slider_container's父元素添加

text-align:center;

将您的#wpcontent_slider_container

居中对齐

答案 4 :(得分:0)

#wpcontent_slider_container{
text-align: center;
}

或使用<center&gt;标签

答案 5 :(得分:0)

最后,我可以通过我的网页中的滑块ubication解决问题。

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

答案 6 :(得分:0)

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