Centering float left thumbnails

I used vldPersonals and I'm having problems trying to get the thumbnails to center on my home page.

If you look at my site here: http://www.filipina-lady.org you will see 7 or 8 thumbnails going across with a rounded corner and an off orange background. I want to center those thumbnails to the background.

The CSS code that controls the thumbnails is

div.ext_new_members div.image11 {
margin: 0px 0px 0px 5px;
float: left; }

div.ext_new_members div.image11 img { }

div.ext_new_members div.image11 a img {
border: 3px solid #ffffff; }

div.ext_new_members div.image11 a:hover img {
border: 3px solid #ffffff; }

The HTML code is:

<div class="image11">
<!-- IF member_picture_preview -->
<a href="{top.virtual_path}{member_profile_link}"><img src="{top.virtual_pic_path}{member_picture_preview}" alt="" border="0" style="filter:alpha(opacity=50); -moz-opacity:0.5;" onmouseover="$(this).fadeTo('normal',1.0)" onmouseout="$(this).fadeTo('normal',0.5)" /><br /></a>
<!-- ELSE -->
<a href="{top.virtual_path}{member_profile_link}"><img src="{top.virtual_tpl_path}{top.loggedin_template}/media/user_picture_none.gif" alt="" border="0" style="filter:alpha(opacity=50); -moz-opacity:0.5;" onmouseover="$(this).fadeTo('normal',1.0)" onmouseout="$(this).fadeTo('normal',0.5)" /><br /></a>
<!-- ENDIF -->
</div>

I tried a couple of things like using the <div align="center"></div> wrapped around the html code. It didn't work. I tried putting the html code in a table and removing the <div class="image11"> but that caused all the thumbnails to line up vertically, one on top of the other.

I was hoping an expert could show me the way. I thought it would be a simple solution but it is turning out not to be. I'm far from an css expert so please be gentle.

Any help would be appreciated.

Thanks in advance

Steve

 

Since your page is fixed width, you could really get away with simply adding however much right padding to the div called ext_new_members until the pictures look centered.

Another possiblity is to keep the div called ext-New_members holding the background, and wrapping the images in another div which has a set width (enough to fit all the images) and given margins of 0 auto. This isn't the best idea if the images are added dynamically and the amount of space needed to contain them changes-- the width of the containing div needs to be explicitly written in the css in order for the margin: 0 auto; trick to work. Plus it adds more markup.

I'd go with solution number one myself-- though again if the number of images increases or descreases substantially then the amount of padding may need to be changed.

Since images are inline elements you may not actually need to float them-- settgin display: inline may stop them from adding the newline they normally do (images are inline but a special sort of inline which stacks one on top of another like block elements do). Still, if display: inline worked, you'd still need to pad them away from the left side anyway so you might as well leave that as is.