Question

I have found a workaround to center a large image (no background) in a smaller div.

#pic {
 width: 60%;
 height: 349px;
 float:right;
 overflow:hidden;
 position:relative;
}

#pic img {
 left:50%;
 margin-left: -100%;
 position:relative;
}

I am happy with the positioning.

However, once I use the Jquery cycle plugin, it completely messes up the positioning and size of the images.

As when I inspect the element (With DOM inspector), it the following values are striked through:

left:50%;

margin-left: -100%;

This is causing the repositioning.

Why are they all in the sudden not valid anymore after using Jquery and how can I fix this?

Thank you for any help!

Scott

Answer 1

You could try to add !important in the css

 #pic {
 width: 60% !important;
 height: 349px;
 float:right;
 overflow:hidden;
 position:relative;
}
#pic img { 
left:50%;
 margin-left: -100% !important;
 position:relative;
}