VPF::Вертикальное выравнивание div (в IE7)

kalabro

Дата 4.7.2009, 01:31 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 60
Регистрация: 17.3.2007
Где: Москва

Репутация: нет
Всего: нет

Всем привет!
Здесь http://forum.vingrad.ru/forum/topic-243756.html нашла решение, как выровнять дивами по вертикали относительно клиентской области.
Все бы замечательно, но вот в ситуации когда выравниваемый див (изображение) больше, чем высота клиентской области, IE7 продолжает «выравнивать», оставляя часть картинки «за экраном».
Код:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<style type="text/css">
html {
    height:100%;
}
body {
    margin:0;
    padding:0;
    background: #f0f0f0;
    height:100%;
    position: relative;
} 
#centerer {
    height: 100%;
    width: 100%;
}
#lb_table {
    display: table;
    height: 100%;
    width:100%;
    position: relative;
    //top: 50%;
    //height: auto;
}
#lb_table_cell {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    position: relative;
    //top: -50%;
    //height: auto;
}
#window {
    border: 1px solid red;
    padding: 5px;
    background: gray;
}
</style>
</head>
<body>
<div id="centerer"><div id="lb_table"><div id="lb_table_cell"><div id="window">
<img src="images/horse.JPG" width="525" height="700" alt="" />
</div></div></div></div>
</body>
</html>

Вот даже видео:
http://www.youtube.com/watch?v=-AkwgJLWbV4
Забыла там показать, что при «обрезании» верха картинки, внизу появляется белая область как раз того размера, который обрезался (я так думаю).
Задавать в #centerer высоту картинки, если она больше clientHeight, не хочу.

Спасибо заранее!

lukas

Дата 5.7.2009, 13:34 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 771
Регистрация: 23.2.2007

Репутация: 3
Всего: 15

IE не понимает display = table и все что с ним связано.

Самый действенный способ отцентрировать контент по центру использовать таблицы.

Код


<table style="width:100%; height:100%">
  <tr><td align="center" valign="middle">

... 

  </td></tr>
</table>

P.S. Только он не работает для doctype xhtml.

Это сообщение отредактировал(а) lukas - 5.7.2009, 13:37

--------------------

http://code.google.com/p/orionphp/ - opensource скриптовой язык Orion (аналог PHP) для freepascal/delphi.

kalabro

Дата 5.7.2009, 17:43 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 60
Регистрация: 17.3.2007
Где: Москва

Репутация: нет
Всего: нет

специально ведь доктайп написала.

Цитата(lukas @ 5.7.2009, 14:34

)

IE не понимает display = table

а вы думаете, тут для прикола записи вида //top: -50%;?)

мне думается, что проблему с IE7 как-то можно решить…

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »