Форум Сайтостроение Веб-строительство

Центровка шаблона по высоте

A-Psina
На сайте с 25.06.2010
Offline
95
A-Psina
887

Здраствуйте, интересут как сделать шаблон по центру экра, по высоте! Зарание спасибо:)

Разработка и поддержка web-решений
Fr3d
На сайте с 29.05.2008
Offline
86
Fr3d
#1

примеры

http://perishablepress.com/press/2007/09/25/absolute-horizontal-and-vertical-centering-via-css/

http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

http://hicksdesign.co.uk/journal/how-to-vertical-centering-with-css

http://www.jakpsatweb.cz/css/priklady/vertical-horizontal-align-valid-solution-en.html

http://tom.me.uk/html-to-css/center-vertically.html

Webmoney кредиты - это WMCoin.ru (http://wmcoin.ru)
nikhotin
На сайте с 24.05.2007
Offline
74
nikhotin
#2

Можно в таблице,

Можно так: 

<!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>

<style>

html, body {height:100%;margin:0;}

#mydiv {background:red;width:100px;height:100px;margin:-50px 0 0 -50px;top:50%;left:50%;position:absolute;}

</style>

</head>

<body>

<div id="mydiv">1111</div>

</body>

</html>

Можно Javscript центрирование div 

<!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>



<style>

html, body {height:100%;margin:0;}

#mydiv {background:red;width:100px;height:100px;}

</style>



</head>

<body>



<div id="mydiv"></div>



</body>

</html>



<script>

if (window.attachEvent){

  window.attachEvent('onresize',center);

  window.attachEvent('onload',center);

}else if(window.addEventListener){

  window.addEventListener('resize',center, false);

  window.addEventListener('load',center, false);

}

function center(){

  var i = document.getElementById('mydiv');

  i.style.marginTop = parseInt(document.body.offsetHeight-i.offsetHeight)/2+'px';

  i.style.marginLeft = parseInt(document.body.offsetWidth-i.offsetWidth)/2+'px';

};

</script>
Ничто не пугает нас страшнее всего,как одинокая маленькая девочка в белом платьице холодной осенней ночью на аллее рядом с кладбищем...
A-Psina
На сайте с 25.06.2010
Offline
95
A-Psina
#3

Спасибо, щас буду пробовать!

A-Psina добавил 13.04.2011 в 13:06

Подскажите другой скрипт по вертикальному центрированию

<script>

if (window.attachEvent){

window.attachEvent('onresize',center);

window.attachEvent('onload',center);

}else if(window.addEventListener){

window.addEventListener('resize',center, false);

window.addEventListener('load',center, false);

}

function center(){

var i = document.getElementById('mydiv');

i.style.marginTop = parseInt(document.body.offsetHeight-i.offsetHeight)/2+'px';

i.style.marginLeft = parseInt(document.body.offsetWidth-i.offsetWidth)/2+'px';

};

</script>

чтото єтот неработает...

10 лучших практических решений Новый скрипт от Brainlabs Настройка событий Google Analytics
nikhotin
На сайте с 24.05.2007
Offline
74
nikhotin
#4

Работает ссылка

A-Psina
На сайте с 25.06.2010
Offline
95
A-Psina
#5

ага, вижу, а как прокрутку убрать вертикальную невкурсе случайно?

nikhotin
На сайте с 24.05.2007
Offline
74
nikhotin
#6
A-Psina:
ага, вижу, а как прокрутку убрать вертикальную невкурсе случайно?

А где там прокрутка?

Может так: ссылка

DiAksID
На сайте с 02.08.2008
Offline
236
DiAksID
#7
A-Psina:
ага, вижу, а как прокрутку убрать вертикальную невкурсе случайно?

так скрипт же квадратик "двигает" установкой margin-top при position:static 😂 насколько margin-top настолько и html и body больше 100% по высоте, вот и полоса прокрутки появляется. азы, как бе...

show must go on !!!...

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий