CSS Alinear verticalmente el texto en el encabezado

Question

Estoy tratando de alinear verticalmente el texto en mi encabezado, y estoy teniendo algunos problemas. Se adjunta una imagen de mi punto de partida:

La cabecera tiene una altura conjunto de 141px y todo en esa cabecera debe estar justo en el medio. Incluso el "Nombre del sitio web aquí", por lo que si ese nombre cambia y solo ocupa 1 línea, o quizás 3 líneas, todo estará en el mismo lugar.

Nota: esto es para múltiples sitios web, que se están generando dinámicamente así que por eso no puedo posicionarlo con un margin-top debido a que los nombres serán diferentes, algunos pueden tomar hasta unas cuantas líneas y algunos podrían asumir múltiples líneas.

---

Saqué mis intentos de alinear verticalmente desde lo busqué en línea, porque nada está funcionando por lo que este es el código de mi punto de partida.

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

Gracias!

Answer 1

creo que esto es lo que estás buscando, mira demo fiddle.

El marcado será como:

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

Tal vez usted puede ver alrededor de un poco más para eliminar una o dos etiquetas.

Probado en Win7 en IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Sé it is also possible to work in IE7, pero necesita un poco de ajuste. T.b.c.

Answer 2

Aquí hay un gran método. Crear un div dentro de la div de cabecera y darle el siguiente estilo:

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

Y asegúrese de que el div cabecera tiene

position:relative; 

y poner todo su contenido dentro innerdiv