CSS 如何在css中居中滑块？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10913992/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center slider in css?
提问by Blackburn Rovers
I installed this plugin on a theme. This theme had a slider, but I didn't like it. So I installed this one.
我在一个主题上安装了这个插件。这个主题有一个滑块，但我不喜欢它。所以我安装了这个。
http://wordpress.org/extend/plugins/content-slide/
http://wordpress.org/extend/plugins/content-slide/
I tried using this
我试过用这个
#wpcontent_slider_container{
position:relative;
margin: 0 auto;
}
And this
和这个
#wpcontent_slider_container{
position:relative;
margin-left:auto;
margin-right:auto;
}
And nothing happens.
什么也没有发生。
Do I have to put something in div?
我必须在div中放一些东西吗？
回答by
Change width
更改宽度
#wpcontent_slider_container{
width: 500px;
margin:0 auto;
}
回答by user2375147
I had the same problem. This is how I solved it:
我有同样的问题。我是这样解决的：
#wpcontent_slider_container {
margin-left: auto !important;
margin-right: auto !important;
}
#wpcontent_slider {
/* Your styling here */
}
Without the "!important" thingy the CSS didn't work fo me either.
没有“！重要”的东西，CSS 对我也不起作用。
回答by Jesse Kernaghan
If you know the width of the slider, here is a little fix that worked for me when center align was being stubborn.
如果你知道滑块的宽度，这里有一个小修复，当居中对齐很顽固时对我有用。
#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;)
}
It's not pretty, but it works. You might have to hide the horizontal overflow of the outer container though.
它不漂亮，但它有效。不过，您可能必须隐藏外部容器的水平溢出。
回答by Jesse Kernaghan
In #wpcontent_slider_container'sparent element add
在#wpcontent_slider_container's父元素中添加
text-align:center;
to center align your #wpcontent_slider_container
居中对齐你的 #wpcontent_slider_container
回答by Ajay Patel
#wpcontent_slider_container{
text-align: center;
}
or use <center> Tag
或使用<center> 标签
回答by Hugo
Finally I can fix the problem with the slider ubication in my web page.
最后，我可以解决网页中滑块泛化的问题。
Just modify the style.css, .main_img { float:left; margin:15px 10px 0 60px}, change the values.
只需修改style.css, .main_img { float:left; margin:15px 10px 0 60px}, 更改值。
回答by Sky
Using the 'margin-right' and 'margin-left' on auto !important worked for me as well. It actually also worked even without using the !important command.
在 auto !important 上使用 'margin-right' 和 'margin-left' 也对我有用。即使不使用 !important 命令，它实际上也能工作。
