gpt4 book ai didi

JQuery Cycle,图像中心

转载 作者:太空宇宙 更新时间:2023-11-04 14:19:20 24 4
gpt4 key购买 nike

我正在尝试构建一个 jQuery Cycle 实现。我有一个 css 问题我不知道为什么照片不在中间,我正在使用网站 http://jquery.malsup.com/cycle/ 的 jQuery Cycle ,预先感谢您的帮助。

enter image description here


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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com