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