Использование CSS - самый элегантный способ выравнивания по вертикали короткого заголовка и описания без таблицы

Question

Не использовать таблицы и
должны работать в IE 7 и Firefox, Chrome, Safari

Самый простой способ выровнять это по вертикали:

A Title (20px)
With a variable length description (12px), can be 1 line or 2 (when wrapped)

внутри div с шириной 500 пикселей и высотой 60 пикселей, вероятно, с использованием таблицы. Без использования таблицы , какой самый элегантный способ сделать это?

Пожалуйста, не просто дайте ссылку на решение с "фиксированной" высотой в качестве ответа, так как это может иметь переменнуювысота.

Обновление: образец и редактируемый тест: http://jsfiddle.net/mn2CH/3/

Answer 1

Посмотрите на это:

Вертикальное центрирование с помощью CSS

Метод 2 (с использованием отрицательных полей) является «классическим» подходом, я использовал его пару раз.

Answer 2

Самый чистый подход, который я видел, который поддерживает более старые версии IE, это этот метод .По сути, для IE он использует умный способ иметь ваш основной контейнер, в вашем случае это будет 500px на 60px, а затем два внутренних контейнера - один позиционируется относительно top: 50%, а другой относительно позиционируется top: -50%,Интуитивно понятно, что один контейнер располагается на полпути вниз по отношению к основному контейнеру, а затем другой контейнер перемещается на половину своей высоты.

И, конечно, для более новых браузеров вы можете использовать более новые атрибуты displayна произвольных элементах, что также объясняет вышеупомянутая статья.

Answer 3

Проверьте эту ссылку и прочитайте ее для получения дополнительной информации: Вертикальный центрирующий текст с помощью CSS .