Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Как выровнять слой ровно по центру страницы?


Автор: sidd 23.7.2008, 04:47
В общем, как это сделать? Причем ширина и высота слоя не известны.
В интернете находил только те методы, в которых размеры слоя были заранее определены. Ну а у меня они могут быть разные.

Автор: JR13 23.7.2008, 08:23
Может margin:0 auto; ?

Автор: krundetz 23.7.2008, 16:45
если слой 100x100px

то

position: absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;

если размеры слоя могут быть разными пишеш простинький js скрипт который сначала определяет размеры слоя а потом на их основе позиционирует его

Автор: lukas 23.7.2008, 18:33
а как вам этот вариант))

<div align="center">
  твой див
</div>

Автор: sidd 24.7.2008, 04:47
Цитата
Может margin:0 auto; ?

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

А не подскажите, как средствами JS узнать размеры слоя? smile
lukas, вы не поняли. Мне не это нужно.

Автор: bars80080 24.7.2008, 09:00
Код

w = document.fetElementById('el1').offsetWidth;

Автор: lukas 24.7.2008, 09:42
Цитата(sidd @  24.7.2008,  04:47 Найти цитируемый пост)
Нет, так не работает.


это не работает если не добавлено...

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Автор: sidd 24.7.2008, 12:43
lukas, не знаю. Все равно что-то не хочет
bars80080, спасибо. Так я и сделаю.

Автор: sidd 2.8.2008, 01:16
Столкнулся еще с одной проблемой. Трабл возникает, когда на страничке есть вертикальный скролинг. Если прокрутить его вниз, то слой появляется уже не по центру экрана. Он появляется немного выше. Как сделать, чтобы скролинг тоже учитывался?

Автор: webster 2.8.2008, 01:24
Можно использовать свойство scrollHeight для тега BODY, если у него не фиксирована высота http://developer.mozilla.org/en/docs/DOM:element.scrollHeight http://msdn.microsoft.com/en-us/library/ms534615(VS.85).aspx

Автор: sidd 2.8.2008, 15:40
webster, не понимаю, как его можно использовать. Ну если я правильно понял, он просто возвращает высоту всей страницы. Так все равно же не известно, на какой позиции сейчас находится юзер. Без этого-то никак.

Автор: krundetz 4.8.2008, 15:04
ну для fierfox достаточно сделать
Код

 position:fixed
 а вот для IE придется повозиться я лично использую следующию возможность
Код

margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');

Автор: sidd 17.8.2008, 01:16
Цитата(krundetz @ 4.8.2008,  15:04)
ну для fierfox достаточно сделать
Код

 position:fixed
 а вот для IE придется повозиться я лично использую следующию возможность
Код

margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');

Спасибо!

Автор: SelenIT 17.8.2008, 11:56
lukas, указанный Вами доктайп ничего не меняет по сравнению с его отсутствием. См. http://habrahabr.ru/blogs/webdev/31484/ (особ. табличку в конце).

sidd, для сабжевой задачи решений несколько. Вот http://cssing.org.ua/2007/04/26/another-css-valign-method/#more-137 для введения в вопрос ;)

Автор: sidd 17.8.2008, 19:02
Цитата(SelenIT @  17.8.2008,  11:56 Найти цитируемый пост)
sidd, для сабжевой задачи решений несколько. Вот неплохая ссылка для введения в вопрос ;)

О, спасибо. Почитаю.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)