如何在CSS中使滑块居中？

Question

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

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 中放一些东西吗？

Answer 1

更改宽度

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

Answer 2

我也有同样的问题。我是这样解决的：

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

#wpcontent_slider {
/* Your styling here */
}

如果没有“！重要”的东西，CSS 对我来说也不起作用。

Answer 3

在

#wpcontent_slider_container's

父元素中添加

text-align:center;

居中对齐您的

#wpcontent_slider_container

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

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

Answer 5

#wpcontent_slider_container{
text-align: center;
}

或使用

<center

> 标签

Answer 6

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

只需修改

style.css

,

.main_img { float:left; margin:15px 10px 0 60px}

，更改值即可。

Answer 7

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

Answer 8

我也有类似的问题。这两点是关键，尤其是块显示模式使滑块可以通过边距居中。

margin 0 auto;
display: block;