CODEWITHSUNDEEP
jquerycss
Mantykora 7
Mantykora 7

Reputation: 173

JQuery Cycle, image center

I am trying to build a jQuery Cycle implementation. I have a problem with css I do not know why the photos are not in the middle, I am using jQuery Cycle from site http://jquery.malsup.com/cycle/, thank you in advance for your help.

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>

Upvotes: 0

Views: 109

Answers (1)

Venu immadi
Venu immadi

Reputation: 1605

hope it will help you, mention its width for content div, then add margin as 0 and auto.

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

   }


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

Upvotes: 1

Related Questions