Question

我正在尝试构建一个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>

img

<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>

Answer 1

希望它会帮助你，提及内容div的宽度，然后将边距添加为0和自动。

.content {   
         width:950px;  
        position:relative;
        margin:0 auto;    
        padding: 10px 0;

   }


   .pics {     
        width: 100%;
        margin:0 auto;
    }

JQuery Cycle，图像中心

1 个答案: