div要素は、これは私の関連ページのマークアップで

Question

別のdiv要素の中央に揃えていない今

#header { 
    width: 960px; 
    height: 110px; 
} 

#logo { 
    background: url('/assets/img/logo.png') no-repeat center; 
    width: 300px; 
    height: 110px; 
    float: left; 
} 


#user_box { 
    width: 300px; 
    height: 60px; 
    float: right; 
    vertical-align: middle; 
} 

、私は中user_boxのdivを配置したいですheader divの垂直中央です。 Googleの多くの実験と実験の後、私はこれが簡単ではないことを学びました。どうやらdivなどのブロック要素を垂直に並べることはできません。だから私はこれを行うための別の方法を探しています。

ハッキーdisplay: table;の方法を見て使ってみましたが、物を変えませんでした。また、要素をspanのようなインライン要素に変更しようとしましたが、それもうまくいきませんでした。私もいくつかの神のひどい理由のためにmargin: auto 0;を使ってみましたが、それもまったく機能しませんでした。

私は助けを求めています。このdivをヘッダーdiv内で縦に並べるにはどうすればよいですか？

ありがとうございます！

Answer 1

設定header

操作デモの高さに等しいuser_boxの行の高さ：http://jsfiddle.net/AlienWebguy/pyppD/

Answer 2

垂直整列はdiv要素で動作しない、そのテーブル内の要素を整列させるため。 http://jsfiddle.net/3k8XE/

あなたは、私は、ヘッダーとしてテーブルを使用しています見ることができるように：あなたのケースではあなただけだから私はあなたのコードを少し周りいじって、ここで私が得たものだ。この

#user_box { margin-top:25px; } /*110-60 = 50/2 = 25*/ 

Answer 3

を使用することができます2つの内部divがtdに変更されていることを除いて、各要素に同じidを適用します。私は2つのdivの間のスペースを補うために内側のtdを追加しました。元々はfloatに設定されていたので、left/rightです。

（もちろんボーダーがちょうどここで実際に何が起こっているのかを示すためにある。）