Выравнивание дива по вертикали

Mytis · May 23, 2011

Добрый день!

Есть проблема:

CSS:


#container
{
position: absolute;
width: 99%;
height: 99%;
min-width: 780px;
min-height: 580px;
}

#cell
{
position: relative;
top: 50%;
width: 700px;
height: 400px;
margin: -200px auto;
}

HTML:


   <div id="container">
     <div id="cell">
     </div>
   </div>

При отрисовке этого дела, слой с ID="CELL" как положено всегда посередине родителя. В браузерах FireFox и Opera при масштабировании окна, родитель уменьшается до минимального предела, после чего перестает это делать. Соот-но его центр всегда в разумных пределах, и дочерний слой, выровненный по этому центру отображается нормально. А вот в Chrome и IE8 при уменьшении размеров окна меньше, чем минимально допущенный размер слоя с ID="container" дочерний слой начинает уезжать за его верхнюю границу, словно его позиционирование и не относительное вовсе (причем он всегда по центру окна, будто у него position: absolute;)

Может есть какой-то более грамотный способ выровнять внутренний слой по вертикали, либо доработка уже существующего кода? Если что-то неграмотно написано, то всегда готов получить по шапке и выслушать советы уважаемых верстальщиков

Gaspode · May 23, 2011

Вы скрины дайте: как хорошо и как плохо.

Mytis · May 23, 2011

В Хроме и Эксплорере:

В Опере и FF:

Great Rash · May 23, 2011

Может так?

margin: -200px auto 0;

Mytis · May 23, 2011

может и так, но дела не меняет

мне бы услышать вердикт опытного верстальщика - а там уже или Ява, или таблицы

Mytis · May 23, 2011

пустил в ход таблицы. Вместо вмещающего дива использовал - все работает, но вот Chrome отказывается применять min-height. Такие дела

Все же если у кого есть решение проблемы - не откажусь прочесть

Edited May 23, 2011 by Mytis

Great Rash · May 23, 2011

Интересное поведение... Пожалуй тут только скрипт поможет.

psywalker · May 23, 2011

А чем например не устроил такой вариант?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* { margin: 0; padding: 0;}
html,body { height: 100%;}
	#container
{
position: relative;
width: 99%;
min-width: 780px;
min-height: 100%;
}

#cell
{
position: absolute;
top: 50%;
width: 700px;
background: red;
height: 400px;
left: 50%;
margin: -200px 0 0 -350px;
}
</style>
</head>

<body>
   <div id="container">
     <div id="cell">
     </div>
   </div>
</body>
</html>

ctpz · May 24, 2011

http://htmlbook.ru/layout/sloy-po-tsentru-veb-stranitsy

на сайте все ж понятно описано

Great Rash · May 24, 2011

psywalker, ctpz, вы не поняли задачу. Внимательней читайте условие.

psywalker · May 24, 2011

psywalker, ctpz, вы не поняли задачу. Внимательней читайте условие.

А чё то не могу въехать, объясни плиз

Great Rash · May 24, 2011

А ты открой верхний код в Мозилле и в Хроме к примеру и посмотри как себя ведет Хром и как Мозилла.

Mytis · May 26, 2011

Вроде бы как Хром посчитал "relative" абсолютным позиционированием. Странное дело

Sign In

Выравнивание дива по вертикали

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information