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

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

Форум программистов > JavaScript: Общие вопросы > Как расположить элемент строго по центру страницы?

Автор: barcelona 7.12.2007, 14:51

Здравствуйте!
Заранее извиняюсь, если этот вопрос уже обсуждался. Как мне расположить div строго по центру страницы, независимо от разрешения экрана?

Автор: KuZyagroup 8.12.2007, 19:38

Код


<script>
function center(obj){
    bw=document.body.clientWidth;
    bh=document.body.clientHeight;
    obj.style.top = bh/2+"px;";
    obj.style.left = bw/2+"px;";
    // or obj.style.cssText = "top:"+bh/2+"px; "+"left:"+bw/2+"px; position:absolute;" 


}
<script>

<div id="myDiv" style="position:absolute" onload="center(this)"></div>

Автор: ksnk 8.12.2007, 21:43

KuZyagroup, А вы сами ЭТО проверяли? smile

Автор: KuZyagroup 8.12.2007, 22:59

ЭТО нет, ТАК делал

Автор: KuZyagroup 8.12.2007, 23:18

Работает в IE7,O9.5b,FF2
http://primeclub.kiev.ua/vingrad-is-template2.html

Код


<!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>
<script>
function center(obj){
    bw=document.getElementsByTagName('HTML')[0].clientWidth;
    bh=document.getElementsByTagName('HTML')[0].clientHeight;
    // obj.style.left = bw/2+"px;";
    //obj.style.top  = bh/2+"px;";
    
    obj.style.cssText = "top:"+bh/2+"px; "+"left:"+bw/2+"px; position:absolute;" 


}
</script>
</head>
<body>
<div id="myDiv" style="position:absolute" >bvhjvghchg</div>
<script>center(document.getElementById('myDiv'))</script>
</body>
</html>

Автор: ksnk 9.12.2007, 00:39

KuZyagroup
Угу, одна ошибка исправилась smile

Осталось осознать, что div, верхний-левый угол которого располагается по центру и div, располагающийся в центре экрана все-таки несколько разные понятия...

Автор: ksnk 9.12.2007, 01:08

Вот это - работает в IE6 и FF2.0+

Код


 Hello! World<br>
 It's just a test!      Repeat the string as many times as you can...<br>

<div style="position:absolute;top:0;left:0;width:100%;height:100%">
  <table border=0 style="width:100%;height:100%;">
  <tr ><td align="center">
   <div style="width:200px;border:1px solid black;">!!!Это, собственно, наш ДИВ и есть!!!!</div>
  </td></tr></table>
</div>

Вероятно, можно обойтись без таблицы, но, imho, получится менее кроссбраузерное решение...

Автор: KuZyagroup 9.12.2007, 07:10

Блин, а подумать по анологии слабо

Код


<!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>
<script>
function center(obj){
    bw=document.getElementsByTagName('HTML')[0].clientWidth;
    bh=document.getElementsByTagName('HTML')[0].clientHeight;
    dw=document.getElementById('myDiv').clientWidth;
    dh=document.getElementById('myDiv').clientHeight;
    // obj.style.left = bw/2+"px;";
    //obj.style.top  = bh/2+"px;";
    alert("top:("+bh+"-"+dh+")/2+px; "+"left:("+bw+"-"+dw+")/2+px; position:absolute;");
    obj.style.cssText = "top:"+(bh-dh)/2+"px; "+"left:"+(bw-dw)/2+"px; position:absolute;"; 


}
</script>
</head>
<body>
<div id="myDiv" style="position:absolute" ><img src="img/dj/lubimoff/442176.jpg" /></div>
<script>center(document.getElementById('myDiv'))</script>
</body>
</html>

http://primeclub.kiev.ua/vingrad-is-template2.html
Совместимать как и в прошлый раз

Добавлено через 8 минут и 1 секунду
2ksnk:
    not <br> u must write or <br></br> or <br />
    are u miss valign="middle"
    and last лучше иметь одну ф-цию которая равняет все нужные дивы чем "ручками"
all the best

Автор: KuZyagroup 9.12.2007, 07:38

http://forum.vingrad.ru/forum/topic-184675.html

Автор: ksnk 9.12.2007, 12:05

KuZyagroup, по линке на ветку в форуме, насколько видно из последнего сообщения FireDemon'а, он остался в совершенных непонятках. ;-) Видимо, что-то не то с примером...
постарайтесь написать свой пример без грязи и мусора...

Зачем там нужен ...getElementById('MyDiv')... если передается параметром obj?
зачем НАМ нужен этот alert?
почему вам кажется, что cssText удобнее, чем ...left и ...top? Вероятно тем, что нужно писать "px", вместо "px;"?
при смене размера окна дивчик не остается по центру. Впрочем, баг это или фича - будет решать barcelonа.

Цитата(KuZyagroup @ 9.12.2007, 07:10

)

лучше иметь одну ф-цию которая равняет все нужные дивы чем "ручками"

И где вы увидели "ручки"?

Цитата(KuZyagroup @ 9.12.2007, 07:10

)

are u miss valign="middle"

May be, однако у меня и так все показывается... Вероятно, если вручную не править этот valign, то так оно и будет. Хотя, добавить <tr ><td align="center" valign="middle"> в 6-ю строчку моего пример, вероятно, не помешает...

,