我正在尝试构建一个 jQuery Cycle 实现。我有一个 css 问题我不知道为什么照片不在中间，我正在使用网站 http://jquery.malsup.com/cycle/ 的 jQuery Cycle , 预先感谢您的帮助。
CSS
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
.container {
position: relative;
width: 1100px;
background-color: #FFF;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.content {
padding: 10px 0;
}
.pics {
width: auto;
height: auto;
}
.pics img {
display: block;
margin-left: auto;
margin-right: auto;
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
}
#prev, #next
{
position: absolute;
z-index: 20;
width: 51px;
height: 68px;
cursor: pointer;
top: 250px;
}
#prev
{
left: 0%;
background-image: url("img_2/prev_button.png");
background-position: 0 0;
background-repeat: no-repeat;
}
#next
{
right: 0%;
background-image: url("img_2/next_button.png");
background-position: 0 0;
background-repeat: no-repeat;
}
</style>
图片
<body>
<div class="container">
<div class="content">
<div class="pics">
<img src="img/1.jpg" width="950" height="540" />
<img src="img/1a.jpg" width="950" height="540" />
<img src="img/1.jpg" width="950" height="540" />
<img src="img/2.jpg" width="950" height="540" />
<img src="img/3.jpg" width="950" height="540" />
<!-- end .pics --></div>
<!-- end .content --></div>
<div id="prev"></div>
<div id="next"></div>
<div id="nav"></div>
<!-- end .container --></div>
</body>
最佳答案
希望对你有帮助，提到内容div的宽度，然后添加边距为0和auto。
.content {
width:950px;
position:relative;
margin:0 auto;
padding: 10px 0;
}
.pics {
width: 100%;
margin:0 auto;
}
关于JQuery Cycle，图像中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20047457/