Выровнять по вертикали содержимое тега заголовка

Question

Я много читал о вертикальном выравнивании текста в CSS. Я не могу понять, почему это было так просто в HTML, но не в CSS.

Во всяком случае, мой вопрос, у меня есть следующее: В моем HTML-документе:

<header>
    <h1> My Website </h1>
</header>

В моей таблице стилей CSS:

header
{
    padding: 0px;
    background-color: BCCCCC;
    color: black;
    font-weight: bold;
    text-align: center;
}

Мне бы хотелось знать самый простой и простой способ выравнивания текста по вертикали, чтобы его можно было сместить к середине раздела заголовка или к концу раздела заголовка.

Если мой вопрос уже был задан, пожалуйста, дайте мне знать, где.

Спасибо.

Answer 1

Дайте height & line-height того же header, что и для "выравнивания по центру"Например:

header
{
    padding: 0px;
    background-color: #BCCCCC;
    color: black;
    font-weight: bold;
    text-align: center;
    height:100px;
    line-height:100px;
    background:red;
    display:block;

}

http://jsfiddle.net/3QGqf/

ОБНОВЛЕНО Если вы хотите, чтобы текст был внизу, вы можете использовать свойство position:absolute или display:table для этого,Вот пример со свойством display:table.

http://jsfiddle.net/3QGqf/2/