CSS definitions needed to center a dynamiclly created thumbnail image in a containing square frame

Question

Hi all,

I want to create an image gallery.Each image is scald dynamiclly so its biggest dimension will be 100px and the other dimension is scaled so it will preserve the original aspect ratio. (For example if the original image width is 200 and the image height is 400 it will be scaled to w:50px h:100px thumbnail) I want that the each image will be placed in a 100px w by 100px h square frame. The problem is that in the images are aligned to the left and to the top of the containing square. What do I need to define in the CSS so that the images will be centered in the containing square ?

The CSS I used:

<style type="text/css">

    #gallery ul

    {

        display: inline-block;

        list-style-type:none;

        margin:0px;

        padding:0px;

        width:530px;

    }

    #gallery ul li

    {

        width:100px;

        height:100px;

        border:1px solid black;

        padding:1px;

        margin:1px;

        display: block;

        float:left;

    }



    #gallery ul li:hover

    {

       background-color:#CCC

    }


</style>

I use ASP.NET ListView control to create the gallery :

                        <div id="gallery">
                    <asp:ListView ID="lstvImages" runat="server" ItemContainerID="itemContainer">
                      <LayoutTemplate>
                           <ul>
                            <asp:Placeholder
                                id="itemPlaceholder"
                                runat="server" />
                           </ul> 
                      </LayoutTemplate>
                       <ItemTemplate>
                            <li>
                            <a href='InsertImageToArticle.aspx?relativePath=<%# Eval("RelativePath") %>'><img src ='<%# Eval("RelativePath") %>' width='<%# Eval("ThumbnailWidth") %>' height = '<%# Eval("ThumbnailHeight") %>' /></a>
                            </li>
                        </ItemTemplate>
                    </asp:ListView>
                    </div>

Thanks

Answer 1

try changing the margin of the image to:

margin: 0 auto;

this should make the left and right margins equal and send the image to the center of the containing element.

Sorry, I am on my mobile at the moment and the qwerty keyboard is pure rubbish or I would elaborate more.