Размещение <div>-а по центре страницы

@outoftime · Регистрация: 25.07.2009

Author24 — интернет-сервис помощи студентам

есть див размещённый божди, его рзмер фиксированый и нужно чтобы он был строго по центре страницы.

не подскажите как это сделать посредством каскадных таблиц стилей?

Vovan-VE · 01.05.2010, 13:23

Код

... {margin:0 auto;}

@outoftime · 01.05.2010, 13:31 **[ТС]**

HTML5

<html>
<head>
<title>TLA Consalting Pty Ltd</title><meta name"keywords" content="" />
            <link rel="stylesheet" href="../style/main.css" type="text/css" />
        </head>
<body><div id='wrap'>
            <div id="logo">Logo</div>
        <ul id='nav'>
<a href='index.php'>
<li style="width:25%" class="menu_active_true">
Главная страница
</li>
</a><a href='contact.php'>
<li style="width:25%" class="menu_active_false">
Наши контакты
</li>
</a><a href='services.php'>
<li style="width:25%" class="menu_active_false">
Услуги
</li>
</a><a href='sitemap.php'>
<li style="width:25%" class="menu_active_false">
Карта сайта
</li>
</a></ul>
 
<form action='' method='POST'>
 
    <table>
 <tr>
 <td>Host:</td>
<td><input type='text' name='host'></td></tr>
<tr>
 <td>User_name:</td>
<td><input type='text' name='user_name'></td></tr>
<tr>
 <td>Password:</td>
<td><input type='text' name='password'></td></tr>
<tr>
 <td>Database_name:</td>
<td><input type='text' name='db_name'></td></tr>
<tr>
 <td>&nbsp;</td>
<td><input type='submit' value='Create'></td></tr>
 
    </table>
 
</form>
            <div align="center">Copywrite corp TFTM &copy; 2010</div>
        </div></body>
</html>

HTML5

#wrap {
    margin: 0px auto;
    width: 900px;
    background-color: #fff;
}

не пашет

Vovan-VE · 01.05.2010, 18:08

Добавьте doctype - все отлично заработает.

HTML5

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

@xxxNEIxxx · 02.05.2010, 17:40

{margin:0 auto;} - работает во всех браузерах кроме ИЕ. для ие нада написать

*html ... {position: relative;
top: 0;
left: 50%;
width: 1000px;
margin-left: -500px;
}

три крапки это название дива, а значение margin-left: -500px; должно быть равным половине ширины с отрицательным значением.

@outoftime · 02.05.2010, 22:13 **[ТС]**

xxxNEIxxx, а теперь расскажите что у вас к чему

Vovan-VE · 03.05.2010, 08:13

Сообщение от xxxNEIxxx

{margin:0 auto;} - работает во всех браузерах кроме ИЕ

И в 6, и в 7 отлично работает, если, повторяю еще раз, добавить doctype

HTML5

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

Добавлено через 56 секунд
А эти Ваши извраты с relative'ами только к лишним проблемам позже приведут.

@outoftime · 03.05.2010, 09:30 **[ТС]**

Vovan-VE, не знаю кто как, но я не люблю при верстке сайта использовать абсолютное позиционирование.

Vovan-VE · 03.05.2010, 12:48

Сообщение от outoftime

использовать абсолютное позиционирование

Разве я это говорил? Абсолютное позиционирование, конечно, полезная штука, но слишком ей увлекаться не нужно. Это как опертор goto в ЯП: демагогию можно развести весьма немаленькую.

@xxxNEIxxx · 03.05.2010, 19:43

не спорю, как прописать доктайп то всё будет норм, но ты не учитал что есть ещё, извеняюсь за выражение - дурачки которые сидят на старых версиях ИЕ, и благодаря тому тчо я написал, посещаемость выростет немного так как отображение в любом случае будет получше. так что 5 строчек стиля лишними не будут в этом случае.

outoftime смотри, див если посунуть на 50% то верхний левый угол будет тупо по центру, поетому мы задаём ширину и margin'он сунем блок влево на половину, поетому получаеться что центр блока по центру. не сложно и на другие браузеры не повлияет.

@outoftime · 03.05.2010, 20:31 **[ТС]**

спасибо всем за розяснения

@SpirtYago · 13.03.2011, 21:08

Сообщение от Vovan-VE

Добавьте doctype - все отлично заработает.

HTML5

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

Блин, специально зарегился только для одного: СПАСИБО!!!
Избавил от кучи геммороя)

PS.
С меня литр пива!

@LeD4eG · 13.03.2011, 21:56

Vovan прав полностью.
xxxNEIxxx, для дурачков, как Вы говорите, которые сидят на старых браузерах достаточно

CSS

1
2
3

body {
    text-align: center;
}

прописать. тем самым старый ослик выравняет и блок и его содержимое по центру. а вот у тегов html и body position и так relative. они так сказать элементы hasLayout.

@Hagrael · 14.03.2011, 13:21

Насколько я знаю, правильно будет сделать так:

CSS

body {
    text-align: center;
}
#wrap {
    text-align: left;
    margin: 0px auto;
}

Это должно работать во всех нормальных браузерах и в IE 5.5+

Vovan-VE · 14.03.2011, 17:31

Все-таки, с !doctype'ом правильнее. Без него даже в IE8 не работает white-space:pre; и еще некоторые хорошие вещи (навскидку не вспомню какие).

@LeD4eG · 14.03.2011, 21:10

Hagrael, Вы действительно думаете, что кто-то ещё пользуется IE5.5?уж не надо перегибать в попытке поддержки старых браузеров....

@SpirtYago · 14.03.2011, 21:25

Сообщение от LeD4eG

Hagrael, Вы действительно думаете, что кто-то ещё пользуется IE5.5?уж не надо перегибать в попытке поддержки старых браузеров....

Не поверишь - но 2.8 % посетителей - именно через это чудо и заходят на сайты....
Хотя больше всего убивает вторая лиса...

Добавлено через 4 минуты

Сообщение от SpirtYago

Не поверишь - но 2.8 % посетителей - именно через это чудо и заходят на сайты....
Хотя больше всего убивает вторая лиса...

Извиняюсь, гоню...
Да, 5.5 уже не видно в статистике...

@Hagrael · 15.03.2011, 13:35

LeD4eG, я лишь привел пример.

@LeD4eG · 15.03.2011, 17:00

SpirtYago, вот-вот

мне тяжело в это поверить, но и IE6 тоже на последнем издыхании!

(

)

@Hagrael · 16.03.2011, 12:28

LeD4eG, да, вот это радость

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,361 Записей в блоге: 5
		1
	Размещение <div>-а по центре страницы 01.05.2010, 13:17. Показов 22657. Ответов 21 Метки нет (Все метки) есть див размещённый божди, его рзмер фиксированый и нужно чтобы он был строго по центре страницы. не подскажите как это сделать посредством каскадных таблиц стилей? 0

Vovan-VE 13208 / 6596 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	01.05.2010, 13:23	2
	Код ... {margin:0 auto;} 2

@xxxNEIxxx 28 / 28 / 2 Регистрация: 21.04.2010 Сообщений: 121
	02.05.2010, 17:40	5
	{margin:0 auto;} - работает во всех браузерах кроме ИЕ. для ие нада написать *html ... {position: relative; top: 0; left: 50%; width: 1000px; margin-left: -500px; } три крапки это название дива, а значение margin-left: -500px; должно быть равным половине ширины с отрицательным значением. 1

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,361 Записей в блоге: 5
	02.05.2010, 22:13 [ТС]	6
	xxxNEIxxx, а теперь расскажите что у вас к чему 0

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,361 Записей в блоге: 5
	03.05.2010, 09:30 [ТС]	8
	Vovan-VE, не знаю кто как, но я не люблю при верстке сайта использовать абсолютное позиционирование. 0

Vovan-VE 13208 / 6596 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	03.05.2010, 12:48	9
	Сообщение от outoftime использовать абсолютное позиционирование Разве я это говорил? Абсолютное позиционирование, конечно, полезная штука, но слишком ей увлекаться не нужно. Это как опертор goto в ЯП: демагогию можно развести весьма немаленькую. 1

@xxxNEIxxx 28 / 28 / 2 Регистрация: 21.04.2010 Сообщений: 121
	03.05.2010, 19:43	10
	не спорю, как прописать доктайп то всё будет норм, но ты не учитал что есть ещё, извеняюсь за выражение - дурачки которые сидят на старых версиях ИЕ, и благодаря тому тчо я написал, посещаемость выростет немного так как отображение в любом случае будет получше. так что 5 строчек стиля лишними не будут в этом случае. outoftime смотри, див если посунуть на 50% то верхний левый угол будет тупо по центру, поетому мы задаём ширину и margin'он сунем блок влево на половину, поетому получаеться что центр блока по центру. не сложно и на другие браузеры не повлияет. 1

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,361 Записей в блоге: 5
	03.05.2010, 20:31 [ТС]	11
	спасибо всем за розяснения 0

Vovan-VE 13208 / 6596 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	14.03.2011, 17:31	15
	Все-таки, с !doctype'ом правильнее. Без него даже в IE8 не работает white-space:pre; и еще некоторые хорошие вещи (навскидку не вспомню какие). 0

@LeD4eG 14 / 14 / 0 Регистрация: 29.09.2009 Сообщений: 79
	14.03.2011, 21:10	16
	Hagrael, Вы действительно думаете, что кто-то ещё пользуется IE5.5?уж не надо перегибать в попытке поддержки старых браузеров.... 0

@SpirtYago 0 / 0 / 0 Регистрация: 13.03.2011 Сообщений: 4
	14.03.2011, 21:25	17
	Сообщение от LeD4eG Hagrael, Вы действительно думаете, что кто-то ещё пользуется IE5.5?уж не надо перегибать в попытке поддержки старых браузеров.... Не поверишь - но 2.8 % посетителей - именно через это чудо и заходят на сайты.... Хотя больше всего убивает вторая лиса... Добавлено через 4 минуты Сообщение от SpirtYago Не поверишь - но 2.8 % посетителей - именно через это чудо и заходят на сайты.... Хотя больше всего убивает вторая лиса... Извиняюсь, гоню... Да, 5.5 уже не видно в статистике... 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	15.03.2011, 13:35	18
	LeD4eG, я лишь привел пример. 0

@LeD4eG 14 / 14 / 0 Регистрация: 29.09.2009 Сообщений: 79
	15.03.2011, 17:00	19
	SpirtYago, вот-вотмне тяжело в это поверить, но и IE6 тоже на последнем издыхании!() 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	16.03.2011, 12:28	20
	LeD4eG, да, вот это радость 0

Размещение <div>-а по центре страницы

Решение