CSS Pionowo wyrównuj tekst w nagłówku

Question

Próbuję wyrównać tekst w pionie w nagłówku i mam pewne problemy. Dołączone jest obraz mojego punktu wyjścia:

Nagłówek ma ustaloną wysokość 141px i wszystko w tym nagłówku powinny być w samym środku. Nawet "Nazwa strony internetowej", więc jeśli ta nazwa się zmieni i zajmie tylko 1 linię, a może 3 linie, wszystko będzie w tym samym miejscu.

Uwaga: to dla wielu stronach internetowych, które są generowane dynamicznie tak dlatego, że nie można po prostu umieścić go z margin-top ponieważ nazwy będą różne, niektóre mogą trwać kilka linii, a niektóre mogą trwać wielokrotność kwestia.

---

Wyjąłem moje próby pionowego dostosowania go do tego, co szukałem w Internecie, ponieważ nic nie działa, więc jest to kod z mojego punktu wyjścia.

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;} 

Dziękujemy!

Answer 1

myślę, że to jest czego szukasz, zobacz demo fiddle.

Znaczniki staną się następująco:

<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> 

Może bawić się wokół trochę więcej, aby wyeliminować jedno lub dwa tagi.

Testowany na Win7 w IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Wiem, it is also possible to work in IE7, ale potrzebuje trochę strojenia. T.b.c.

Answer 2

Oto wspaniała metoda. Tworzenie div wewnątrz div nagłówka i nadać mu następujące style:

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

I upewnij się, że div nagłówka ma

position:relative; 

i umieścić wszystkie treści wewnątrz innerdiv