CSS not making image align in the center with OpenCarousel

Question

I'm using JQuery OpenCarousel to display some images on a webpage, but if the images are not as wide as the carousel I want them to be aligned in the center. I can align the images when they are out of the carousel, just not when they are in it. The carousel uses this code to display them:

<div class="RoundRow ocarousel">
    <div class="ocarousel_window">
        <div style="width: 850px;"><img style="margin:0 auto;display: block;" src="./images/Carousel/Slide1.jpg" /></div>
        <div style="width: 850px;"><img style="margin:0 auto;display: block;" src="./images/Carousel/Slide2.jpg" /></div>
    </div>
</div>

JQuery OpenCarousel - https://github.com/justinmc/jQuery-Open-Carousel

My Webpage - http://joshblease.co.uk/Apartments/

Answer 1

Your img element inherits float: left from rule in openCarousel.css (line 34).

In order to correctly center the image, you need to reset float:

<div class="RoundRow ocarousel">
    <div class="ocarousel_window">
        <div style="width: 850px;"><img style="float: none;margin:0 auto;display: block;" src="./images/Carousel/Slide1.jpg" /></div>
        <div style="width: 850px;"><img style="float: none;margin:0 auto;display: block;" src="./images/Carousel/Slide2.jpg" /></div>
    </div>
</div>