Способы вертикального центрирования внутри дива? @ DeForum.ru
DeДверь  
Логин:  
Пароль:  
  Автологин  
   
Разместить рекламу
Письмо админу
Правила | FAQ | *Поиск | Наша команда | Регистрация | Вход
 
 
 Страница 1 из 1 [ Сообщений: 7 ] 
*   Список форумов / Начинка и техника / Программирование для WWW » ответить » создать топик « | »
Автор Сообщение
cosmic Муж.
участник
49
Сообщения: 1500
Зарегистрирован: 17.03.03
Откуда: Koenig City
Заголовок сообщения: Способы вертикального центрирования внутри дива?
Сообщение Добавлено: 3 Март 2008, 18:53:28 
Бывает часто такая нужда: вертикально центрировать контент внутри дива. Как вы это делаете?
К примеру есть
Код:
<div style="height:40px">Content</div>


Content будет прижат к верхней части, а нужно чтоб был посередине. Я часто справлялся с этим паддингами, недавно придумал писать line-height:40px, но когда нужно вставить <img> все портится. Способ position:relative мне как-то не нравится, слишком исскуственно. Что вы можете посоветовать?

_________________
Это были те времена, когда мужчины были мужчинами и сами писали драйвера для своих устройств. © Линус Торвальдс
tentoys Муж.
постоянный участник
121
Сообщения: 2940
Зарегистрирован: 06.08.02
Откуда: МКАДонутряк
Заголовок сообщения: Re: Способы вертикального центрирования внутри дива?
Сообщение Добавлено: 3 Март 2008, 21:19:26 
http://trifler.ru/blog/post_1201282950.html
http://yeshare.vicp.net:83/p/8399397/item11

_________________
Keep in touch. Andrey Alexeev.
karamba Муж.
старожил
209
Сообщения: 6498
Зарегистрирован: 17.08.05
Откуда: Киев. А шо?
Сообщение Добавлено: 3 Март 2008, 23:01:39 
cosmic, все имеющиеся на сегодня способы настолько громоздки, условны и неуниверсальны, что <td> с valign=middle по-умолчанию продолжает рулить.
Я как-то пытался прикрутить такую штуку, результат: громоздкая конструкция из 3 или 4 див-ов и три десятка строк цсс-кода с хаками :insane: Плюнул и засунул во внешний контейнер <table height=100% …<td>… , забыв о характере контента внутри ячейки.
С тех пор стараюсь, проектируя интерфейс и рисуя оформиловку, избегать вертикального выравнивания по средине.

_________________
клетчатый!
tentoys Муж.
постоянный участник
121
Сообщения: 2940
Зарегистрирован: 06.08.02
Откуда: МКАДонутряк
Сообщение Добавлено: 4 Март 2008, 00:03:03 

karamba писал(а):
С тех пор стараюсь, проектируя интерфейс и рисуя оформиловку, избегать вертикального выравнивания по средине.


Согласен, но бывают ситуации и довольно часто, когда надо выровнять не текст внутри дива (или иной контент), а сам див, к примеру, заставка флеш, сплэш-скрин и т.д. такое ведь гораздо проще сделать.

_________________
Keep in touch. Andrey Alexeev.
AlexShop Муж.
участник
34
Сообщения: 1866
Зарегистрирован: 17.02.04
Сообщение Добавлено: 4 Март 2008, 03:05:45 
С тремя вложенными дивами:
http://www.jakpsatweb.cz/css/css-vertic … ution.html

_________________
Тот, кто задает вопрос, глупец в течение пяти минут, тот, кто его не задает, глупец всю свою жизнь. (Китайская поговорка)
karamba Муж.
старожил
209
Сообщения: 6498
Зарегистрирован: 17.08.05
Откуда: Киев. А шо?
Сообщение Добавлено: 4 Март 2008, 11:35:51 
tentoys, заставка, флеш, сплеш-скрин обычно фиксированной высоты, для которых достаточно:
Код:
html {height: 100%;}
body {width: 100%; height: 100%; min-height: 100%;}
.Splash {position: absolute; width:<ширина_картинки>px; height:<высота_картинки>px; left: 50%; top: 50%; margin-top: –(высота_картинки  / 2)px; margin-left: –(ширина_картинки  / 2)px;}

тогда можно обойтись вообще без контейнера, напр. <img class="Splash"… или <object class="Splash"…

_________________
клетчатый!
cosmic Муж.
участник
49
Сообщения: 1500
Зарегистрирован: 17.03.03
Откуда: Koenig City
Сообщение Добавлено: 4 Март 2008, 14:07:22 
AlexShop, +1 только что освоил этот метод, он мне нравится...

_________________
Это были те времена, когда мужчины были мужчинами и сами писали драйвера для своих устройств. © Линус Торвальдс
*   Список форумов / Начинка и техника / Программирование для WWW « | » » ответить » создать топик
 Страница 1 из 1 [ Сообщений: 7 ] 
Показать сообщения за:   Поле сортировки  
Найти:
Перейти:  
Уровень доступа: Вы не можете начинать темы. Вы не можете отвечать на сообщения. Вы не можете редактировать свои сообщения. Вы не можете удалять свои сообщения. Вы не можете добавлять вложения.
cron


ООО ДеФорум
При использовании материалов сайта ссылка на DeForum.ru — обязательна.
Проект Павла Батурина ©2001-2077; // Powered by phpBB © 2013 phpBB Group
Rambler's Top100