asp.net - CSS 定义需要将动态创建的缩略图图像置于包含方形框架中的中心

Question

我想创建一个图片库。每张图片都是动态烫伤的，所以它的最大尺寸是 100 像素并且另一个维度被缩放，因此它将保留原始纵横比。(例如，如果原始图像宽度为 200，图像高度为 400，它将缩放为 w:50px h:100px 缩略图)我希望每张图片都放置在 100px w x 100px h 的方形框架中。问题是在图像中对齐到包含的左侧和顶部正方形。我需要在 CSS 中定义什么才能使图像在包含的正方形中居中？

我使用的 CSS:

<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>

我使用 ASP.NET ListView 控件来创建画廊:

                        <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>

谢谢

Answer 1

尝试将图像的边距更改为:

margin : 0 auto ；

这应该使左右边距相等，并将图像发送到包含元素的中心。

抱歉，我现在在用手机，qwerty 键盘完全是垃圾，否则我会详细说明。