IE7 Вертикальное и горизонтальное центрирование изображения - PullRequest
Новая
       16

IE7 Вертикальное и горизонтальное центрирование изображения

1 голос
/ 20 декабря 2011

Я пытаюсь выровнять изображение по центру по вертикали и горизонтали в пределах фиксированной высоты и ширины. Код, который у меня есть, прекрасно работает в FF, Chrome, Safari и IE8 +, но не в IE7, и я не могу, по жизни, найти обходной путь.

В настоящее время изображения могут иметь различную высоту и ширину, хотя, если я не могу найти хорошее решение, думаю, я могу быть более строгим в отношении высоты и прибегнуть к проверенным и проверенным методам центрирования.

Живой пример на jsfiddle

У кого-нибудь есть яркие идеи?

Ответы [ 2 ]

3 голосов
/ 20 декабря 2011

Поскольку <img> элементы по умолчанию display: inline;, мы можем расположить их по центру так же, как и текст: 

a {
    height: 180px;
    width: 150px;
    display: block;
    text-align: center;
    border: 1px solid black;
    margin: 10px;
    line-height: 180px;
}
a img {
    vertical-align: middle;
}

jsFiddle Demo

0 голосов
/ 20 декабря 2011

Раньше у меня была эта ужасная проблема, и я решил ее следующим образом. Идея состоит в том, чтобы использовать изображение с использованием CSS в качестве фонового изображения Я думаю / надеюсь, что это работает в ie7. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
        <style type="text/css">
            #wm_splash{
                position: absolute;
                top: 0;
                left: 0;
            }

            #wm_splash_loading {
                background-image: url('images/loading.gif'); /* the loading image (animated gif)*/
                height: 80px;                                     /* loading image height */
                width: 285px;                                     /* loading image width*/
                padding: 0px 0 0 0px;
                text-align: center;
            }
       </style>
       <title>Loading...</title>
    </head>

    <body>

        <div id = "wm_splash" style = "width : 100% ; height : 100%">
            <table width = "100%" height = "100%" >
                <tbody>
                    <tr>
                        <td width = "100%" height = "100%" align = "center" valign = "middle">
                            <div id = "wm_splash_loading"> loading... </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>      
    </body>
</html>
...