Определения CSS, необходимые для центрирования динамически созданного эскиза изображения в квадратной рамке - PullRequest
Новая
       11

Определения CSS, необходимые для центрирования динамически созданного эскиза изображения в квадратной рамке

1 голос
/ 04 июля 2010

Я хочу создать галерею изображений. Каждое изображение масштабируется динамически, поэтому его самое большое измерение будет 100px, а другое измерение масштабируется, чтобы оно сохраняло исходное соотношение сторон.(Например, если ширина исходного изображения равна 200, а высота изображения равна 400, оно будет масштабировано до w: 50px h: уменьшенное изображение 100px) Я хочу, чтобы каждое изображение было помещено в квадратную рамку размером 100px w на 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>

Спасибо

1 Ответ

0 голосов
/ 05 октября 2010

попробуйте изменить поле изображения на:

поле: 0 авто;

. Это должно привести к выравниванию левого и правого полей и отправить изображение в центр содержащего элемента.

Извините, я сейчас на своем мобильном телефоне, а клавиатура qwerty - просто чушь, или я бы уточнил подробнее.

...