Set alignment to center of the image in the <li>

This is my website. http://cheaandassociates.com/

i want to set the alignment of the banner on the home page to center.

Well, this is my html,

<div id="contentmain">
    <div class="bannerarea">
      <div class="slideShow">
        <ul class="slides" style="height: 908px; width: 1071px; overflow: hidden; display: block;">

            <li class="slide" style="position: absolute; display: none;"><img alt="Banner1" src="images/logo48201140259.jpg" style="margin-left: auto; margin-right: auto;"></li>

            <li class="slide" style="position: absolute; display: none;"><img alt="Banner2" src="images/logo482011开发者_开发问答40327.jpg" style="margin-left: auto; margin-right: auto;"></li>

            <li class="slide" style="position: absolute; display: none;"><img alt="Banner3" src="images/logo48201140346.jpg" style="margin-left: auto; margin-right: auto;"></li>

            <li class="slide" style="position: absolute; display: none;"><img alt="Banner4" src="images/logo48201140411.jpg" style="margin-left: auto; margin-right: auto;"></li>

            <li class="slide selected" style="position: absolute; display: list-item;"><img alt="Banner5" src="images/logo48201140501.jpg" style="margin-left: auto; margin-right: auto;"></li>

        </ul>
      </div>
        <script type="text/javascript">
            $(document).ready(function() {
                // simplest example
                $('.slideShow').slideShow({
                    interval: 20,
                    repeat: false
                });
            });
        </script>        
    </div>
  </div>

Images loaded over here are dynamic and their size may vary, so how can i set the images alignment to center, so that even if the width is different then i can show them quite well.

Thanks

Specify a width on the <li> elements and then apply a text-align:center. Image elements <img> are inline elements so you don't have to use margin:auto; to center align them.

<li class="slide" style="position: absolute; display: none; width: 1071px; text-align:center;">

... and try moving all the style to an external CSS file ;)

You've set a fixed width of 1071px on the ul.slides. It looks like you're trying to center with margin:auto; on the images (this is good), so if you set the width on your ul.slides to the width of your largest image (1227px), you should get the desired result.

As a side note, I'd recommend cutting back on the size of those images they are both heavy (kb) and too wide.