PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

как отцентровать все (div'ы и контент вообще) другим DIV'ом?

Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS (Модераторы: ALEN, armancho7777777)

Страниц (1): [1]

Без описания

Поиск в теме | Версия для печати

alxfro	Отправлено: 14 Июля, 2011 - 15:48:26
Частый гость Покинул форум Сообщений всего: 208 Дата рег-ции: Июль 2011 Помог: 0 раз(а)	т.е. есть CODE (html): скопировать код в буфер обмена <div id=yyy> <div id=xxx>бла блабла</div> <div id=xxx1>бла блабла</div> <div id=xxx2>бла блабла</div> <div id=xxx3>бла блабла</div> <div id=xxx4>бла блабла</div> </div> <div id=zzz> <div id=xxx>бла блабла</div> <div id=xxx1>бла блабла</div> <div id=xxx2>бла блабла</div> <div id=xxx3>бла блабла</div> <div id=xxx4>бла блабла</div> </div> нужно все это вывести по центру страницы. везде используется postition: relative, абсолютного позиционирования нигде нет. Предложения?

grefon	Отправлено: 14 Июля, 2011 - 15:51:53
Частый посетитель Покинул форум Сообщений всего: 823 Дата рег-ции: Нояб. 2010 Помог: 32 раз(а)	CODE (html): скопировать код в буфер обмена <style> div { text-align:center; } </style> ----- ____________________________________________________________________ Ну как то так, наверное. http://grefon[dot]com

alxfro	Отправлено: 14 Июля, 2011 - 15:55:04
Частый гость Покинул форум Сообщений всего: 208 Дата рег-ции: Июль 2011 Помог: 0 раз(а)	grefon пишет: <style> div { text-align:center; } </style> не работает, центрирует только текст и прочее. вложенные div'ы не хочет.

tsoi85	Отправлено: 14 Июля, 2011 - 16:49:01
Новичок Покинул форум Сообщений всего: 63 Дата рег-ции: Июнь 2011 Помог: 10 раз(а)	margin: auto; - для div'ов которые требуется вывести по центру. Пример: Спойлер (Отобразить) CODE (html): скопировать код в буфер обмена <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ru" /> <style type="text/css"> #yyy, #zzz { margin: auto; width: 600px; background-color: #dfdfdf; } #zzz { background-color: #d2d2d2; } .xxx { margin: auto; width: 300px; background-color: #fff; } .xxx1 { margin: auto; width: 400px; background-color: #999; } .xxx2 { margin: auto; width: 500px; background-color: #afafaf; } </style> <title>Тест</title> </head> <body> <div id="yyy"> id yyy <div class="xxx">class xxx</div> <div class="xxx1">class xxx1</div> <div class="xxx2">class xxx2</div> </div> <div id="zzz"> id zzz <div class="xxx">class xxx</div> <div class="xxx1">class xxx1</div> <div class="xxx2">class xxx2</div> </div> </body> </html> http://htmlbook[dot]ru/html/attr/id - атрибут id

alxfro	Отправлено: 14 Июля, 2011 - 17:11:39
Частый гость Покинул форум Сообщений всего: 208 Дата рег-ции: Июль 2011 Помог: 0 раз(а)	margin: 0 auto thanks но у меня видимо где-то есть косяк, раз не центрирует даже так

Pavelbeginner	Отправлено: 14 Июля, 2011 - 20:28:16
Частый посетитель Покинул форум Сообщений всего: 882 Дата рег-ции: Март 2010 Помог: 1 раз(а)	Цитата: но у меня видимо где-то есть косяк, раз не центрирует даже так Центрироваться дивы не будут даже с margin:0 auto; т.к. по-умолчанию ширина дива равна ширине родительского контейнера. Свойство margin:0 auto используется тогда, когда ширина дива задана явно, например width:100px;, а ширина родительского контейнера больше значения ширины дочернего дива, тогда центрирование будет происходить.

join	Отправлено: 14 Июля, 2011 - 23:09:15
Гость Покинул форум Сообщений всего: 91 Дата рег-ции: Февр. 2011 Помог: 1 раз(а)	CODE (htmlphp): скопировать код в буфер обмена <!doctype html> <html> <head> <style> #ess{width:1100px;margin:0 auto;} #yyy,#zzz{border:1px solid #999;padding:15px;} .cen{border:1px solid #333;position:relative;height:50px;} #yyy,#zzz{white-space:nowrap;} #yyy,#zzz{position:relative;} #yyy,#zzz{width:500px;} #yyy,#zzz{display:inline-block} </style> </head> <body id="ess"> <div id=yyy> <div id=xxx class="cen">бла блабла</div> <div id=xxx1 class="cen">бла блабла</div> <div id=xxx2 class="cen">бла блабла</div> <div id=xxx3 class="cen">бла блабла</div> <div id=xxx4 class="cen">бла блабла</div> </div> <div id=zzz> <div id=xxx class="cen">бла блабла</div> <div id=xxx1 class="cen">бла блабла</div> <div id=xxx2 class="cen">бла блабла</div> <div id=xxx3 class="cen">бла блабла</div> <div id=xxx4 class="cen">бла блабла</div> </div> </body> </html> еще вариант для всех браузов CODE (html): скопировать код в буфер обмена <!doctype html> <html> <head> <style> #ess{width:1100px;margin:0 auto;padding:2px;border:1px solid red;width:616px;} #yyy,#zzz{border:1px solid #999;padding:3px;} .cen{border:1px solid #333;position:relative;height:50px;text-align:center;} #yyy,#zzz{position:relative;} #yyy,#zzz{width:300px;} #yyy,#zzz{display:inline-block;float:left;} </style> </head> <body> <div id="ess"> <div id=yyy> <div id=xxx class="cen">бла блабла</div> <div id=xxx1 class="cen">бла блабла</div> <div id=xxx2 class="cen">бла блабла</div> <div id=xxx3 class="cen">бла блабла</div> <div id=xxx4 class="cen">бла блабла</div> </div> <div id=zzz> <div id=xxx class="cen">бла блабла</div> <div id=xxx1 class="cen">бла блабла</div> <div id=xxx2 class="cen">бла блабла</div> <div id=xxx3 class="cen">бла блабла</div> <div id=xxx4 class="cen">бла блабла</div> </div> </div> </body> </html> (Отредактировано автором: 14 Июля, 2011 - 23:25:17) ----- - "Holy shit!" -девиз Холливуда - "Hello world " -девиз PhP

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« HTML, Дизайн & CSS »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.