CSS allinea verticalmente il testo nell'intestazione

Question

Sto provando ad allineare verticalmente il testo nella mia intestazione e sto avendo qualche problema. In allegato è un'immagine del mio punto di partenza:

L'intestazione ha un'altezza serie di 141px e tutto in quella di intestazione dovrebbe essere proprio nel mezzo. Anche il "Nome del sito web qui", quindi se quel nome cambia e prende solo 1 riga, o forse 3 righe, saranno tutte nello stesso posto.

Nota: questo è per più siti web, che vengono generati in modo dinamico è per questo che non posso posiziono con un margin-top perché i nomi saranno diversi, alcuni potrebbero prendere poche righe e alcuni potrebbero richiedere fino multipla Linee.

---

ho tirato fuori i miei tentativi di allineare verticalmente da ciò che ho cercato online perché niente sta funzionando quindi questo è il codice dal mio punto di partenza.

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

Grazie!

Answer 1

credo che questo sia quello che stai cercando, vedi demo fiddle.

Il markup diventerà come:

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

forse si può smanettare un po 'di più per eliminare uno o due tag.

Testato su Win7 in IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Conosco it is also possible to work in IE7, ma necessita di alcune regolazioni. T.b.c.

Answer 2

Ecco un ottimo metodo. Creare un div all'interno del div intestazione e dargli il seguente stile:

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

E assicurarsi che il div intestazione ha

position:relative; 

E mettere tutto il contenuto all'interno innerdiv