CSSヘッダーの垂直方向のテキストの整列

Question

ヘッダー内のテキストを垂直方向に整列しようとしていますが、何か問題があります。私の出発点の画像を添付：

ヘッダは141pxのセット高さを有し、そのヘッダ内のすべてが真ん中にあるべきです。 「ここのウェブサイトの名前」だから、その名前が変更されて1行か3行かしかない場合は、すべて同じ場所になります。

注：これは名前が異なることになるので、私はちょうどmargin-topでそれを配置することができない理由ですので、動的に生成されている複数のWebサイト用ですは、いくつかの数行を取る可能性があり、いくつかは、複数を取るかもしれませんライン。

---

これは私の出発点からのコードなので、何も動作していないため、私はオンラインで検索したものから垂直に整列しようとしました。

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の内側のdivを作成し、それを次のスタイルを与えますあなたが探しているものは、demo fiddleを参照してください。たぶん、あなたは、1個のまたは2つのタグを除去するためにいくつかのより多くの周りいじることができ

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

：

マークアップは次のようになります。

IE8、IE9、Opera 11.50、Safari 5.0.5、FF 5.0、Chrome 12.0でWin7でテスト済みです。私はit is also possible to work in IE7を知っていますが、チューニングが必要です。 T.b.c。

Answer 2

これは素晴らしい方法です。私はこれがあると思い

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

とヘッダーのdivが

position:relative; 

を持っていることを確認し、innerdiv