VPF::Центрировать div по вертикали - Форум программистов

Роман

Дата 30.6.2007, 19:19 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 279
Регистрация: 9.7.2006

Репутация: нет
Всего: 1

Как центрировать див в окне?
По горизонтали так: <center>...</center>, а вот как по вертикали не знаю, подскажите.

______

P. S. JS не предлагать!

--------------------

Жизнь - это последствия от последствий.

WebDisaster

Дата 30.6.2007, 21:03 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

Обсуждалось здесь

Novojiloff

Дата 30.6.2007, 21:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 31.10.2006

Репутация: нет
Всего: нет

В принципе у дива не такого атрибута, чтобы что-то центрировать по вертикали.
Зато это можно сделать с помощью таблиц, например:

Код


<table width="100%" height="100%">
    <tr vAlign="middle" align="middle">
        <td>
            TEXT
        </td>
    </tr>
</table>

Если что непонятно, пиши smile

WebDisaster

Дата 30.6.2007, 21:25 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

Цитата(Novojiloff @ 30.6.2007, 21:04

)

Не бывает: align может быть center, left или right.

Роман

Дата 30.6.2007, 21:27 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 279
Регистрация: 9.7.2006

Репутация: нет
Всего: 1

Novojiloff, таблицы на принято использовать для позиционирования, они служат для наполнения.
И если прописать

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

то ничего работать не будет.

Добавлено через 4 минуты и 53 секунды
WebDisaster, имелось ввиду <tr style="vertical-align: middle" >

Это сообщение отредактировал(а) Роман - 30.6.2007, 21:29

--------------------

Жизнь - это последствия от последствий.

WebDisaster

Дата 30.6.2007, 21:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

С этим доктайпом нужно "растянуть" body в высоту до размера видимой области экрана и тогда всё будет работать.

Код


<!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>
<title>table 100% height</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
<!--
html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

-->
</style>
</head>

<body>
<table width="90%"  border="1" cellpadding="10" style="margin: 0 auto; height: 100%">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Точно так же будет работать и с 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>
<title>div 100% height</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
<!--
html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

-->
</style>
</head>

<body>
<div style="height: 100%; background-color:#6699FF"></div>
</body>
</html>

Роман

Дата 30.6.2007, 22:30 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 279
Регистрация: 9.7.2006

Репутация: нет
Всего: 1

WebDisaster, в IE вроде работает, но как-то странно. А в FF вобще не работает.

--------------------

Жизнь - это последствия от последствий.

WebDisaster

Дата 30.6.2007, 22:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

Что именно работает/не работает? Центрация по вертикали? Или body не тянется на 100% высоты? div, который центрируется имеет фиксированную высоту (статичный html) или она меняется (шаблон для движка)?

Роман

Дата 30.6.2007, 22:45 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 279
Регистрация: 9.7.2006

Репутация: нет
Всего: 1

div фиксированного размера. Я его засунул в таблицу и он позиционируется нормально (в IE), но то что в диве почему-то сместилось.
В FF по горизонтали все по центру, а по вертикали - вверху (не по центру), но содержимое дива не смещается (отображается как задумано).

--------------------

Жизнь - это последствия от последствий.

WebDisaster

Дата 30.6.2007, 22:55 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

По описанию проблему понять трудно. Возможно, она связана с "проваливанием" маргинов вложенных блоков. Хорошо бы видеть или сайт или скриншот с пояснениями.

Если центрируемый по вертикали 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>
<title>Центрируем div</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
<!--
html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
div#centered {
    height: 500px; /* высота центрируемого div'a в пикселях */
    top: 50%;
    position:relative;
    margin-top: -250px; /* половина высоты центрируемого div'a в пикселях */
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    background-color:#33CCFF;
}
-->
</style>
</head>

<body>
<div id="centered">Здесь то, что нужно отцентрировать по вертикали и горизонтали</div>
</body>
</html>

Роман

Дата 30.6.2007, 23:05 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 279
Регистрация: 9.7.2006

Репутация: нет
Всего: 1

WebDisaster, метод хороший, но высота дива 700px и при уменьшении окна, верх дива пропадает, т. к. top становится отрицательным.
Я скину сайт на хост, посмотришь.

Добавлено через 12 минут и 52 секунды
вот ссылка: http://rondmeo.narod.ru/1/

--------------------

Жизнь - это последствия от последствий.

WebDisaster

Дата 1.7.2007, 15:54 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

Попробуйте так:

Код


#body {
    width: 990px;
    height: 700px;
    position: absolute;
    top: 50%;
    margin-top: -350px;
    left: 50%;
    margin-left: -495px;
}

ЗЫ. А таблицу я бы вообще удалил.

Это сообщение отредактировал(а) WebDisaster - 1.7.2007, 15:58

Роман

Дата 1.7.2007, 17:51 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 279
Регистрация: 9.7.2006

Репутация: нет
Всего: 1

WebDisaster, я таблиц и сам не приемлю.
А так как ты предлагаешь я делал:

Цитата(Роман @ 30.6.2007, 23:05

)

...метод хороший, но высота дива 700px и при уменьшении окна, верх дива пропадает, т. к. top становится отрицательным.

--------------------

Жизнь - это последствия от последствий.

WebDisaster

Дата 1.7.2007, 21:14 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

Почему у меня ничего никуда не "пропадает"?

Вот код Вашей страницы. Я там выкинул за ненадобностью таблицу, тэги <center>, и добавил стили для #body.
Скопируйте код, сохраните его как файл и откройте в любом браузере. У меня ВСЁ работает нормально. Единственное, я не разбирался как поведут себя другие позиционированные элементы.

Код


<!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=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0; padding: 0;
/*background: #595959 url(/img/bg.gif);*/
background: #ffffff url(/img/bg.gif);
}
#body {
    width: 990px;
    height: 700px;
    position: absolute;
    top: 50%;
    margin-top: -350px;
    left: 50%;
    margin-left: -495px;
    background-color: #CCC;
}
body, p, table, input, textarea {
font: 13px "Trebuchet MS", Arial, sans-serif;
}

h1, h2, h3, h4, p, ul {
margin-top: 0; margin-bottom: 0.7em;
}
h1 {
font: normal 18px "Trebuchet MS", Arial, sans-serif;
}
h2 {
font: bold 16px "Trebuchet MS", Arial, sans-serif;
}
h3 {
font: bold 14px "Trebuchet MS", Arial, sans-serif;
}
h4 {
font: bold 13px "Trebuchet MS", Arial, sans-serif;
}
form {
margin: 0;
}
ul {
margin-left: 1.5em;
padding-left: 0px;
}
a:hover {
color: red;
}
a.nu {text-decoration: none;}

small {
font: normal 11px Verdana, Arial, sans-serif;
}

#outer {
text-align: center;
}

#container {
text-align: left;
width: 970px;
height: 710px;
border: none;
margin: 0 auto;
margin-top: 20px; margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
padding:0;
}

#pagebody {
position: relative;
float: left;
width:955px;
height:702px;
background: #666666;
}

#rshadow {
position: relative;
float: left;
display: block;
width: 7px; height: 702px;
background: url(/img/rshadow.gif) no-repeat right;
}

#bshadow {
width: 962px; height: 7px;
background: url(/img/bshadow.gif) no-repeat;
clear: both;
}

#toplink a {
position: absolute;
top: 14px; left: 17px;
display: block;
margin: 0; padding: 0;
width: 273px; height: 65px;
text-decoration: none;
text-indent: -999em;
}

#toplink a:hover {
border: 1px solid #ddd;
border-bottom: 1px solid #bbb; border-right: 1px solid #ccc;
}

#title0, #title1, #title2, #title3, #title4, #title5, #title6, #notitle {
margin: 0; padding: 0;
width: 955px; height: 455px;
}
#title0 {
background: url(/img/title0.jpg) no-repeat;
}
#notitle {
background: url(/img/notitle.jpg) no-repeat;
}

#topmenu0, #topmenu1, #topmenu2, #topmenu3, #topmenu4, #topmenu5, #topmenu6 {
width: 955px; height: 27px;
}
#topmenu0 {
background: url(/img/topmenu0.gif) no-repeat;
}
#menu0, #menu1, #menu2, #menu3, #menu4, #menu5, #menu6 {
width: 955px; height: 220px;
color: #ffffff;
}
#menu0 {
background: url(/img/menu0.gif) no-repeat;
}
#menu0 a, #menu1 a, #menu2 a, #menu3 a, #menu4 a, #menu5 a, #menu6 a {
display: block;
border: none;
text-decoration: none;
}
#menu0 a:hover, #menu1 a:hover, #menu2 a:hover, #menu3 a:hover, #menu4 a:hover, #menu5 a:hover, #menu6 a:hover {
border: 1px solid #fff; border-bottom: 1px solid #eee; border-right: 1px solid #eee;
}

#section1, #section2, #section3, #section4, #section5, #section6 {
position: absolute;
padding-top: 5px;
}

#section1 {
left: 38px;
}
#item1_1 a {
width: 130px; height: 28px;
}

#section2 {
left: 179px;
}
#item2_1 a {
width: 130px; height: 19px;
}
#item2_2 a {
width: 130px; height: 28px;
}

#section3 {
left: 322px;
}
#item3_1 a, #item3_2 a, #item3_4 a, #item3_5 a, #item3_7 a, #item3_9 a, #item3_10 a {
width: 160px; height: 19px;
}
#item3_3 a {
width: 160px; height: 31px;
}
#item3_6 a, #item3_8 a {
width: 210px; height: 19px;
}

#section4 {
left: 496px;
}
#item4_1 a {
width: 160px; height: 30px;
}

#section5 {
left: 693px; /* 688px */
}
#item5_1 a {
width: 130px; height: 17px;
}
#item5_2 a, #item5_3 a {
width: 130px; height: 17px;
}

#section6 {
left: 865px;
}
#item6_1 a {
width: 70px; height: 28px;
}
#item6_2 a {
width: 70px; height: 19px;
}

#bullet {
position: absolute;
margin: 0;
width: 5px; height: 5px;
background: none;
/*border: 1px solid #000;*/
}

#item2_1 a:hover, #item3_1 a:hover, #item3_2 a:hover, #item3_3 a:hover, #item3_4 a:hover, #item3_5 a:hover, #item3_6 a:hover, #item3_7 a:hover, #item3_8 a:hover, #item3_9 a:hover, #item3_10 a:hover, #item5_3 a:hover {
border-top: 1px dashed #fff; border-right: 1px dashed #fff; border-bottom: 1px dashed #fff;
}

img {border: none;}

p {margin-top: 0; margin-bottom: 6px;}

.c {text-align: center;}
.r {text-align: right;}
.j, .aj {text-align: justify;}
.a, .aj {text-indent: 28px;}
.clear {margin-top: 5px; clear: both;}
.none {display: none;}
.far {text-indent: -999em;}
.br {margin-top:3px; margin-bottom:3px;}
.times {font-family: 'Times new roman';}
.mono {font-family: Courier;}
</style> 

</head>
<body>
    <div id="body">
        <div id="main">
            <div id="menu"><img src="/img/3.gif" border="0" usemap="#Map"/>
              <map name="Map" id="Map">
                <area shape="poly" coords="21,212,56,175,47,164,9,200" href="#" />
                <area shape="poly" coords="39,234,127,146,115,134,27,222" href="#" />
                <area shape="poly" coords="58,253,125,186,114,175,46,241" href="#" />
                <area shape="poly" coords="79,272,136,216,123,204,67,260" href="#" />
              </map>
            </div>
        
            <div id="rtstudio">
                <font id="name"> Студия Романа Татаренцева </font>
                <font id="studio"> | RT Studio </font>            </div>        
        </div>
    
        <div id="bottom">
            <div id="left">            </div>
            <div id="design">
                Design by:            </div>
        </div>
    </div>
</body>
</html>

Это сообщение отредактировал(а) WebDisaster - 1.7.2007, 21:47

Роман

Дата 4.7.2007, 00:39 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 279
Регистрация: 9.7.2006

Репутация: нет
Всего: 1

Вот код:

Код


<!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=windows-1251" />
<title>Center</title>
<style type="text/css">
#center{
    background-color:black; 
    color:white; 
    width:300px;
    height:250px;
    position: absolute;
    top: 50%;
    margin-top: -150px;
    left: 50%;
    margin-left: -125px;
}
</style>
</head>

<body>
    <div id="center">
        Почему у меня ничего никуда не "пропадает"?<br/><br/>
        Вот код Вашей страницы. Я там выкинул за ненадобностью таблицу, тэги &lt;center&gt;, и добавил стили для #body.<br/>
        Скопируйте код, сохраните его как файл и откройте в любом браузере. У меня ВСЁ работает нормально. Единственное, я не разбирался как поведут себя другие позиционированные элементы. 
    </div>
</body>
</html>

Вот результат: http://tatarencev.narod.ru/center.html

Вот что выходит при уменьшении окна (начало текста посмотреть не удается)

Присоединённый файл ( Кол-во скачиваний: 7 )

c.gif 16,59 Kb

--------------------

Жизнь - это последствия от последствий.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »