CSS вертикально выровнять текст в заголовке

Question

Я пытаюсь выровнять текст в заголовке по вертикали, и у меня возникли проблемы. Прикрепленное изображение моей отправной точки:

Заголовок имеет установленную высоту 141px, и все в этом заголовке должно быть прямо посередине. Даже «Название веб-сайта здесь» , поэтому, если это имя меняется и занимает только 1 строку или, возможно, 3 строки, все это будет в одном месте.

Примечание: это для нескольких веб-сайтов, которые создаются динамически, поэтому я не могу просто расположить его с margin-top, потому что имена будут другими, некоторые могут занимать несколько строк и некоторые могут занимать несколько строк.

---

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

HTML:

<div id="header">
    <h1>Name of Website Here</h1>
    <h3>Call Today!<br /><span>(xxx) xxx-xxxx</span></h3>
    <p>123 Main St.<br />City, State, Zip</p>
</div>

CSS:

#header{height:141px;}
#header h1{float:left;font-size:1.7em;width:200px;text-align:center;line-height:26px}
#header h3{float:left;text-align:center;color:#e62520;font-size:1.7em;line-height:26px;font-style:italic;margin:0 0 0 95px}
#header h3 span{font-size:1.2em;}
#header p{float:right;color:#2a5091;font-size:1.3em;font-style:italic;font-weight:bold;line-height:20px;text-align:right;}

Спасибо!

Answer 1

Я думаю, это то, что вы ищете, см. демо-скрипка .

Разметка будет выглядеть так:

<div id="header">
    <span><h1>Name of Website Here</h1></span>
    <span><h3>Call Today!<br /><span>(xxx) xxx-xxxx</span></h3></span>
    <div><span><p>123 Main St.<br />City, State, Zip</p></span></div>
</div>

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

Протестировано на Win7 в IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.Я знаю , также возможно работать в IE7 , но для этого требуется некоторая настройка.Tbc

Answer 2

Вот отличный метод.Создайте div внутри div заголовка и задайте ему следующий стиль:

.innerdiv {height:1px; position:absolute; margin-top:50% }

И убедитесь, что div заголовка имеет

position:relative;

И поместите весь ваш контент в innerdiv