centralize images in div?

I have a div that can contain anywhere from one to four images. If there are less than four images, they get aligned to the left. I want to align them in the center of the containing div so that the image list is centered no matter how many images there are.

Here is my current code:

<div id="bigImg" {if $ads_settings.enable_video && $listing.enable_video && $listing.video}style="display: none;"{/if}>
    <center>
        <a开发者_JAVA百科 href="{$live_site}/images/listings/{$listing.images[0].picture}" class="thickbox" rel="image_gallery">
            <img src="{$live_site}/images/listings/bigThmb/{$listing.images[0].picture}" class="pic" onmouseover="this.className='pic_over';" onmouseout="this.className='pic'" alt="{$listing.title|strip_tags:false}" />
        </a>
    </center>
</div>

The site I want this to work on can be found here.

Add the css-style margin: 0 auto; to your div #bigImg. This centers the contents.

add this to css stylesheet

 .bigimg div {margin: 0 auto;}
 .bigimg div img {text-align: center; float: left;}

Add class and replace < center > tags with div as per bellow:

<div id="bigImg" class="bigimg" {if $ads_settings.enable_video && $listing.enable_video &&    $listing.video}style="display: none;"{/if}>
 <div>
    <a href="{$live_site}/images/listings/{$listing.images[0].picture}" class="thickbox" rel="image_gallery">
        <img src="{$live_site}/images/listings/bigThmb/{$listing.images[0].picture}" class="pic" onmouseover="this.className='pic_over';" onmouseout="this.className='pic'" alt="{$listing.title|strip_tags:false}" />
    </a>
    </div>
    </div>