Center image within div

I have a datalist that loads a series of images.  Ideally, I'd like every image to be enclosed within a frame with a black border and white space surrounding the image.

To get this effect, I use a float to surround the dynamic image or "shrink wrap" the border with appropriate padding on each image within the dataset. Consequently, by using a float, my images don't center horizontally.  To illustrate this problem, please see Picture 1.  
My question is, how do I maintain the border properties but also gain the ability to center the image as seen in picture 2.  (The colors were changed in the pictures for a better illustration.  The actual thumbnail would be contained within the white frame.)

I've included my source code too, but please let me know if you have any questions.  Any help would greatly be appreciated.    

<td style="text-align: center; vertical-align: middle;">
                            <asp:DataList ID="lvGallery" runat="server" OnItemDataBound="lvAlbum_ItemDataBound"
                                RepeatDirection="Horizontal" CellSpacing="3" ShowFooter="False" RepeatColumns="5" 
                                ShowHeader="False" Width="100%">
                                <ItemTemplate>
                                    <div style="float: left; text-align: center; border: solid 1px #C0C0C0; padding: 3px 3px 3px 3px;
                                        background-color: White; margin: 3px; ">
                                        <asp:HyperLink ID="linkImage" ImageUrl="someurl.aspx" runat="server"></asp:HyperLink>
                                    </div>
                                </ItemTemplate>
                            </asp:DataList>
                        </td>

Select allOpen in new window

original.jpg
finall.jpg