Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Вертикальное выравнивание div (в IE7)

Автор: kalabro 4.7.2009, 01:31

Всем привет!
Здесь 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

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

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

Код


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

... 

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

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

Автор: kalabro 5.7.2009, 17:43

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

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

)

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

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

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