Форум Flasher.ru

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)
-   HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)
-   -   отцентровать div по центру окна (http://www.flasher.ru/forum/showthread.php?t=100408)

Feb_vl 27.08.2007 13:40

отцентровать div по центру окна
 
сайт представляет собой div размером 400*650

как сделать чтобы он находился точно по центру окна браузера?

по горизонтали это делается в css так:

Код:

position: relative;
margin: auto;

а как отцентровать по вертикали?

KidsKilla 27.08.2007 14:40

с вертикалями в ксс ой как туго.
position: absolute;margin:-325px -200px 0;top:50%;left:50%;

Feb_vl 27.08.2007 15:07

position: absolute;margin:-325px -200px 0;top:50%;left:50%;

не центрует. див уходит вправо-вверх.
можете пояснить идею на словах?

top и left делают отступ сверху и слева на расстояние равное половине экрана. а зачем вы загоняете див за пределы экрана сверху (-325) и назначаете равные отрицательные отступы слева и справа (-200)?

Feb_vl 27.08.2007 15:37

подумал сейчас
как вариант можно узнать координаты яваскриптом

Код:

var height=window.screen.availHeight;
var height1=(height-высота_дива)/2
...

а потом вписать тэг с этим параметром через document.write("<div...>")

но вариант мне не нравится, так как лично у меня всегда в опере яваскрипт отключен.

Skubent 27.08.2007 16:40

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

Идея KidsKilla в том, что мы ставим левый верхний угол дива в точку 50% по вертикали, 50% по горизонтали а потом задаем отрицательное смещение на полразмера дива вверх-влево.

KidsKilla 27.08.2007 17:12

Feb_vl, тупишь.
Код:

<div style="position:absolute;margin:-325px -200px 0;top:50%;left:50%;width:400px;height:650px;border:1px solid red;">qwe</div>

Feb_vl 28.08.2007 03:49

KidsKilla

:) понял где ошибка. я неправильно указал размер дива в первом посте
не 400 на 650, а 650 на 400
спасибо, теперь разобрался :)

Skubent

спасибо, за расшифровку!


Часовой пояс GMT +4, время: 20:20.

Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2026, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.