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

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

Есть код:
Код:
<!DOCTYPE html>
<html>
<head>
<title>Авторизация</title>
<style type="text/css" href="style.css" />
</head>
<body>
<form action="login.php">
<label for="login"><input type="text" id="login" name="login" />
<label for="password"><input type="password" id="password" name="password" />
<input type="submit" value="Войти" />
</form>
</body>
</html>
Этот код менять нельзя, можно писать только css. Форма должна быть строго по центру экрана. Как выравнять по горизонтали, я понимаю, а как по вертикали?
Записан
Sla
Команда клуба

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

WWW
« Ответ #1 : 07-04-2010 13:36 » 

Код:
   position:absolute;
    top:50%;
    left:50%;
возможно еще понадобятся
Код:
   margin: с отрицательным смещением
    width: с реальным размером
    height: с реальным размером
       
« Последнее редактирование: 07-04-2010 13:38 от Sla » Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Sla
Команда клуба

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

WWW
« Ответ #2 : 07-04-2010 13:39 » 

впрочем
вот пример
http://pepelsbey.net/2009/12/special-effects-tea/
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Fear
Гость
« Ответ #3 : 07-04-2010 13:43 » 

    height: с реальным размером
Задать не получится, потому что в форму могут быть добавлены сообщения, и заранее высота формы неизвестна. Абсолютным позиционированием можно на центр документа поставить один из углов, отрицательными маргинами сдвинуть на фиксированную величину, но способ не сработает, если фиксированная величина неизвестна.
Записан
Золотая Лань
Молодой специалист

ru
Offline Offline
Пол: Женский

« Ответ #4 : 07-04-2010 18:17 » 

выравнивание по вертикали — это поведение, характерное для таблиц.
Таким поведением элементов любят пользоваться сторонники табличной вёрстки.
Вот и мы этим воспользуемся.
нужно включить фантазию, и представить, что у нас есть таблица высотой 100% от высоты окна, в ней ячейка высотой 100% от высоты таблицы, для которой включено выравнивание по центру, а уже в этой ячейке по центру размещается вложенная таблица, в которой располагается всё остальное.
Красиво?
Воплотить фантазии в жизнь можно так:
Код:
html {
display: table; /* та самая воображаемая таблица */
width: 100%; height: 100%; /* во весь размер окна */
}

body {
display: table-cell; /* типа ячейка */
width: 100%; height: 100%; /* во весь размер таблицы */
vertical-align: middle; /* содержимое которой выравнивается по вертикали */
text-align: center; /* и по горизонтали */
}

form {
display: table; /* якобы вложенная таблица. Тогда будет центроваться как надо */
width: auto; /* это уже на ваше усмотрение, вообще не обязательно, но мало ли что дизайнер задумал. То же и с высотой: хотите — задавайте, не хотите — не надо. Всё равно форма будет по центру. */
}
и всё, внутри формы можете теперь вытворять что заблагорассудится.

Только этот способ не работает в древних версиях IE Жаль
Так что включаем graceful degradation, и делаем, чтобы там выглядело хоть как-то:
Код:
<!--[if lte IE 7]>
<style type="text/css">
form {
width: 400px; /* выберите наиболее подходящий. Если явно не указать ширину, то форма расположится на всю ширину документа */
margin-top: 100px; /* опять же выберите наиболее подходящий отступ сверху. Это будет не центровка по вертикали, но чтобы выглядело относительно пристойно.
}
</style>
<![endif]-->
Если кто знает способы исправить метод, сделать его пригодным для старых версий IE, дополните пожалуйста ответ.
Записан
Sla
Команда клуба

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

WWW
« Ответ #5 : 07-04-2010 18:45 » 

Золотая Лань, спасибо за мастер-класс. Улыбаюсь
Но вернемся назад к первому топику.

HTML5! Древние версии ИЕ отпали.
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Золотая Лань
Молодой специалист

ru
Offline Offline
Пол: Женский

« Ответ #6 : 07-04-2010 19:00 » 

не читайте решение для старых версий IE в моём предыдущем посте!
Оно было ошибочным.
Глупо, как мне сразу не пришло в голову.
В IE же есть такая замечательная штука, как expressions.
Код:
<!--[if lte IE 7]>
<style type="text/css">
form {
width: 400px;
margin-top: expression(document.documentElement.clientHeight > this.offsetHeight ?(document.documentElement.clientHeight - this.offsetHeight)/2+'px':0 );
}
</style>
<![endif]-->
и всё абсолютно красиво во всех браузерах.


HTML5! Древние версии ИЕ отпали.

На пробу меняю в предложенном коде доктайп на другой, в частности на html 4 или xhtml 1.0 strict — всё равно всё работает.
Тестировалось: IE 6,7,8, FF 3.5, 3.6, Opera 10.10, Safari 4, Chrome 5 beta

и кто сказал, что при использовании html 5 отпадают старые версии IE?
« Последнее редактирование: 08-04-2010 22:49 от Золотая Лань » Записан
Dimka
Деятель
Команда клуба

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

« Ответ #7 : 09-04-2010 03:56 » 

Золотая Лань, замечу, что в IE 5.0 expressions в CSS имели такое забавное свойство, что не работали до тех пор, пока не запустится движок JScript. Так что ещё советую добавить в body onload="var x = 0;" Улыбаюсь
Записан

Программировать - значит понимать (К. Нюгард)
Невывернутое лучше, чем вправленное (М. Аврелий)
Многие готовы скорее умереть, чем подумать (Б. Рассел)
Золотая Лань
Молодой специалист

ru
Offline Offline
Пол: Женский

« Ответ #8 : 09-04-2010 08:03 » 

Dimka, ну тут надо смотреть по обстоятельствам.
Какой процент населения пользуется IE5?
И какой процент сайтов разработан просто без учёта этого антиквариата?
Я время от времени ради забавы смотрю современные сайты в IE 3/4/5 — в большинстве случаев просто каша непотребная, на фоне которой невыравненная по вертикали форма — сущий пустяк.
А ничего не значащий onload выглядит некрасиво.
Записан
Dimka
Деятель
Команда клуба

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

« Ответ #9 : 09-04-2010 13:49 » 

Цитата: Золотая лань
А ничего не значащий onload выглядит некрасиво.
Ну добавь комментарий, который поясняет смысл этой конструкции Улыбаюсь

Код: (HTML)
<body onload="var x = 0; // Танцы с бубном, чтобы работали expressions в CSS">
Записан

Программировать - значит понимать (К. Нюгард)
Невывернутое лучше, чем вправленное (М. Аврелий)
Многие готовы скорее умереть, чем подумать (Б. Рассел)
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines