Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: как отцентрировать div?  (Прочитано 33904 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Lex
Специалист

ru
Offline Offline

WWW
« : 26-10-2004 21:06 » 

столкнулся тут с проблемкой. Не знаю как решить правильно.
Суть вот в чем. есть html код
Код:

<style>
#id1|
  width{ 600px;
  height{ 100%;
"
</style>

<body>
<div id="id1">
  Некоторое наполнение.
</div?
</body>


Как разместить этот div посередине экрана
Если добавить в стили что-то типа этого:
Код:

body|text-align{ center;"

то в IE div становится посередине. (Если не указан DOCTYPE)
Если ставишь полный и правильный DOCTYPE TRANSITIONAL или STRICT или же открываешь в опере, то div отображается слева.

Как это сделать правильно?
Записан

Megabyte be with you!
Skubent
Гость
« Ответ #1 : 27-10-2004 08:38 » 

Таблицей, вероятнее всего. Или в стиле div'а определить положение.
Записан
Lex
Специалист

ru
Offline Offline

WWW
« Ответ #2 : 27-10-2004 09:04 » 

Хочется уйти от таблицы.

Цитата

Или в стиле div'а определить положение.

Как именно?
Записан

Megabyte be with you!
npak
Команда клуба

ru
Offline Offline
Пол: Мужской

« Ответ #3 : 27-10-2004 11:39 » 

Lex, воспользоваться свойством "text-align"

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" contents="text/html; charset=koi8-r">
    <title>Centering DIV</title>
  </head>
  <body>

    <div style="text-align{ center">Hello!</div>

  </body>
</html>
Записан

UniTesK -- индустриальная технология надежного тестирования.

http://www.unitesk.com/ru/
Lex
Специалист

ru
Offline Offline

WWW
« Ответ #4 : 27-10-2004 16:54 » 

npak, Это даст то, что текст в диве будет отцентрирован.
А мне нужно, чтобы сам див находился посередине.
Записан

Megabyte be with you!
MOPO3
Ай да дэдушка! Вах...
Команда клуба

lt
Offline Offline
Пол: Мужской
Холадна аднака!


WWW
« Ответ #5 : 28-10-2004 04:28 » 

А что, <div align="center"> не работает ? Если нет, тогда таблица с одним целом.
Записан

MCP, MCAD, MCTS:Win, MCTS:Web
Lex
Специалист

ru
Offline Offline

WWW
« Ответ #6 : 28-10-2004 08:40 » 

MOPO3, попробую(не помню делал я это или нет), но кажется это работает в IE, а опера отказывается.
Записан

Megabyte be with you!
MOPO3
Ай да дэдушка! Вах...
Команда клуба

lt
Offline Offline
Пол: Мужской
Холадна аднака!


WWW
« Ответ #7 : 28-10-2004 08:57 » 

Lex, если не сработает, значит тогда делай таблицей, ничего страшного в этом нет Ага
Код:

<table width="100%" border="0"><tr><td width="100%" align="center" valign="middle">
<div>Hello!</div></td></tr></table>
Записан

MCP, MCAD, MCTS:Win, MCTS:Web
npak
Команда клуба

ru
Offline Offline
Пол: Мужской

« Ответ #8 : 28-10-2004 09:04 » 

Lex, странная программа "опера".  Если обернуть div в div, то в IE внутренний div центрируется, а в опере нет.

Код:
<div style="text-align{ center">
    <div style="width{ 100px"><p>Centered?</p></div>
</div>


В опере текст во внутреннем div отцентрирован, но сам div выравнен влево.

Попробуй такой хак, может быть тебе подойдёт.  Надо выставить левое и правое поле для div равными.  Такой div центрируется и в опере, и в ИЕ:
Код:
<div style="margin-left{ 30%; margin-right{ 30%"><p>centered div</p></div>
Записан

UniTesK -- индустриальная технология надежного тестирования.

http://www.unitesk.com/ru/
Lex
Специалист

ru
Offline Offline

WWW
« Ответ #9 : 28-10-2004 10:00 » 

Цитата: npak
Lex, странная программа "опера".  Если обернуть div в div, то в IE внутренний div центрируется, а в опере нет.

Код:
<div style="text-align{ center">
    <div style="width{ 100px"><p>Centered?</p></div>
</div>


В опере текст во внутреннем div отцентрирован, но сам div выравнен влево.

Если бы опары была простая, то я бы и не спрашивал. Улыбаюсь

Цитата: npak
Попробуй такой хак, может быть тебе подойдёт.  Надо выставить левое и правое поле для div равными.  Такой div центрируется и в опере, и в ИЕ:
Код:
<div style="margin-left{ 30%; margin-right{ 30%"><p>centered div</p></div>


Что при этом будет с шириной div'а? мне нужен фиксированный размер в пикселях.
Записан

Megabyte be with you!
npak
Команда клуба

ru
Offline Offline
Пол: Мужской

« Ответ #10 : 28-10-2004 11:36 » 

О! стандарты читать надо, однако Улыбаюсь

http://www.w3.org/TR/CSS1.html#horizontal-formatting

Оказывается, если margin-right и margin-left выставить в auto, то броузер должен установить их равными и отцентрировать элемент.

Код:
<div style="margin-left{ auto; margin-right{ auto; width{ 100px;
      border-width{ thin; border-color{ green; border-style{ solid">
      <p>Centered!</p>
    </div>

Рисует зелёный прямоугольник по центру страницы.  Проверил в опере и ИЕ.
Записан

UniTesK -- индустриальная технология надежного тестирования.

http://www.unitesk.com/ru/
Lex
Специалист

ru
Offline Offline

WWW
« Ответ #11 : 28-10-2004 11:54 » 

О!, то что нужно Пиво!
Записан

Megabyte be with you!
npak
Команда клуба

ru
Offline Offline
Пол: Мужской

« Ответ #12 : 28-10-2004 12:24 » 

Цитата: Lex
Пиво!

Это очень правильная мысль Улыбаюсь  Поддерживаю.
Записан

UniTesK -- индустриальная технология надежного тестирования.

http://www.unitesk.com/ru/
Lex
Специалист

ru
Offline Offline

WWW
« Ответ #13 : 31-10-2004 10:53 » 

Кстати, тут обнаружил, что если указать
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


То див не центрируется в IE6.
А если сделать правильную запись
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http{//www.w3.org/TR/html4/loose.dtd">

то все работает Улыбаюсь
Записан

Megabyte be with you!
ilhan
Гость
« Ответ #14 : 23-07-2008 14:29 » 

А в IE7 не работает,можь кто подскажет как быть?
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #15 : 23-07-2008 14:46 » 

ilhan, шо не работает?
код в студию
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
ilhan
Гость
« Ответ #16 : 23-07-2008 15:03 » 

вот такой класс:
#AC_mainContentRow {
  position: absolute;
  right: 0;
  left: 0;
  top: 129px;
  bottom: 140px;
  padding: 0;
  width: 900px;
  margin-left: auto;
  margin-right: auto;
}

в firefox все норм, а в 7 IE пипец,неговоря уже про 6=)
Записан
ilhan
Гость
« Ответ #17 : 23-07-2008 15:14 » 

все решил проблему
тот же класс,только для ie7:

#AC_mainContentRow {
  position: absolute;
  right: 0;
  left: 50%;
  top: 129px;
  bottom: 140px;
  padding: 0;
  width: 900px;
  margin-left: -450px;
}
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #18 : 23-07-2008 15:59 » 

ilhan, это не класс, это - id.

Документацию полезно читать и знать, чем они отличаются и как их можно использовать. Например, в xhml, как в xml-документе, каждый id может быть назначен только одному элементу, хотя браузеры и переваривают множественные назначения.

С точки зрения CSS, классы и идентификаторы различаются приоритетом селектора: класс - 10, id - 100.

В IE есть трабла с процентными величинами марджина при абсолютном позиционировании.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Chuda
Гость
« Ответ #19 : 26-07-2008 21:33 » 

ого! удивило!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
на календарь посмотрите, вроде как уже 21 век.

а вообще, просто делаете margin: 0 auto; — и всё, элемент посередине.
Записан
Aveic
Постоялец

ru
Offline Offline
Пол: Мужской
Yellow


« Ответ #20 : 03-08-2008 23:05 » 

Шильгия права =)
Ну или можно воспользоваться другим вариантом: использовать отрицательные поля и абсолютое позиционирование.
Допустим вот так:
Код:
div.centered {
 position:absolute;
 left:50%;
 width:1000px;
 margin-left:-500px; /* левое поле по модулю должно равняться половине ширины div'а */
 background:black;
}
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #21 : 04-08-2008 03:52 » 

Aveic, не забывай про IE - с ним будут трудности. Попробуй протестить код хотя бы в минимуме самых ходовых на сегодня браузеров: IE6, FF2 и Opera9.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Chuda
Гость
« Ответ #22 : 04-08-2008 08:39 » 

те трудности, которые только в IE6, в этом случае побороть легко.
Реальные трудности с абсолютным позиционированием вполне кроссбраузерные Улыбаюсь Вот как быть, если количество текста в блоке заранее неизвестно?
Записан
Aveic
Постоялец

ru
Offline Offline
Пол: Мужской
Yellow


« Ответ #23 : 04-08-2008 14:08 » 

Aveic, не забывай про IE - с ним будут трудности. Попробуй протестить код хотя бы в минимуме самых ходовых на сегодня браузеров: IE6, FF2 и Opera9.
С этим вообще проблем нет. Opera9, FF2, IE5.5—IE8, Safari одинаково рендерят картину.
те трудности, которые только в IE6, в этом случае побороть легко.
Реальные трудности с абсолютным позиционированием вполне кроссбраузерные Улыбаюсь Вот как быть, если количество текста в блоке заранее неизвестно?
Юзать JS.
Записан
Chuda
Гость
« Ответ #24 : 04-08-2008 19:46 » new

Юзать JS.

последнее дело.
Записан
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines