我正在尝试将 flexslider 用作我网站上的轮播横幅。出于某种原因，我无法让 slider 在我的网站上水平居中。我的代码如下:
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="styles_test.css">
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
</head>
<body>
<div class="slideshow">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/slideshow_preview.png" alt="Slide1"/>
</li>
<li>
<img src="images/placehold.gif" alt="Slide1"/>
</li>
<li>
<img src="images/placehold.gif" alt="Slide1"/>
</li>
</ul>
</div>
</div>
</body>
</html>
styles_test.css:
.slideshow {
text-align: center;
}
.flexslider {
width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
正如您在上面的 CSS 中看到的，我使用了两种不同的方法来使元素居中。其余的 flexslider.css 和 jquery.flexslider.js 文件可以在 this website 找到。 .这两个文件都未修改，我认为问题出在 flexslider.css 文件中的某个地方。如果我是新来的，请告诉我是否遗漏了什么。提前感谢您的所有帮助。
最佳答案
写这个
.slides {
width: 100%!important;
text-align: center;
}
.slides li {
display: inline-block!important;
*display: inline!important;
float: none!important;
}
关于jquery - Flexslider 居中问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17756838/