Можно ли вертикально выравнять содержимое элемента HTML внутри его бокса?

PureVirtual, 407 просмотров

Дан блочный элемент HTML; например, такой:

<div class="bar">bar</div>

Зададим ему в CSS высоту:

div.bar { height: 3em; }

Можно ли теперь с помощью CSS сделать так, чтобы содержимое ("bar") выводилось не в левом верхнем углу полученного (трёхстрочного) блока, а в центре? По горизонтали это делается элементарно: добавлением "text-align:center", а по вертикали? (Сразу скажу, что "vertical-align:middle" не помогает.) Подчеркну, что HTML фиксирован (предположим, что так его выводит некая CMS), менять можно только CSS. Содержимое элемента ("bar") может меняться (в том числе занимать несколько строк), при этом хочется, чтобы текст по-прежнему оставался в центре бокса.

P.S.: Если интересует происхождение вопроса - можете взглянуть на "прототип меню": http://www.dinkypage.com/5uc

Примечание:
Да, ну и, естественно, запрещено всё, что явно не разрешено. Я говорю о JavaScript'е, wowan1.

Примечание:
Newone, спасибо (я как раз об этом прочитал в одном из топиков по ссылке внизу страницы:-)). С div'ом работает (даже без родителя), но вот с примером, "меню" - почему-то нет. :-( Что я делаю не так? Вот обновлённый пример: http://www.dinkypage.com/jdc

Примечание:
Понял, что не так со ссылками. display:table-cell + float:left = нехорошо. :-(
Спасибо за ссылки, буду читать и думать...

Примечание:
Ну я и торможу под вечер... Зачем мне, спрашивается, понадобился float, когда ячейки и так распространяются горизонтально?? В общем, ответ в 20:02:02 содержал всю необходимую информацию. Вам, wowan1 тоже спасибо за помощь!

Ответы:

wowan1

топ высчитывай и задавай

Newone

делается с помощью display:table родителю и table-cell самому элементу, внутри которого требуется вертикальное выравнивание.

wowan1

Я прекрасно понял очем вы говорите

wowan1

Ссылки

[1]
Без названия (Web)

wowan1

div {
position: relative;
}
div span {
display: block;
position: absolute;
top: 50%;
left: 0%;
width: 100%;
}
div span span {
position: relative;
top: -50%;
}

Newone

к Дополнение #3
float автоматом назначает элементу display:block;

16 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.