別のdiv内の2つのインラインdivを縦横に整列させて整理してください。

Question

これは、このサイトに複数回含まれています。しかし、私は他人の問題に対する答えを自分のものに当てはめることはできません。だからここに私の具体的なケースです：

<div class="logo-align_container"> 
    <div class="logo_image"> 
     <img src="images/logo.png" /> 
    </div> 
    <div class="logo_text"> 
     <div class="site_name"> 
      <h1>foo</h1> 
     </div> 
     <div class="site_slogan"> 
      <h2>bar</h2> 
     </div> 
    </div> 
    <br class="clearBoth" /> 
</div> 

にはどうすればいいlogo-align_container内で垂直および水平logo_imageとlogo_textを中央にしますか？ Web上に散在する修正を適用するたびに、divを中央に水平に配置することができますが、は常にlogo-align_containerの先頭に揃えられ、再配置はできません。

さらに、画像とテキストはページのかなりの部分を構成します。ウィンドウが小さすぎてインラインでの位置に配置できない場合は、のようにlogo_textが崩壊してしまいましたが、今まではこれまでに起こっていますが、両方がまだ水平方向と垂直方向に整列しているようにしてください。これが最初の問題の修正の一部とならない場合は、別々に行うことができれば本当に素晴らしいでしょう。logo-align_container固定高さは532pxとなります

ありがとうございます！

EDIT：wheresrhysの溶液がほとんど印をつけます。私がそれをしたいと思っている達成していないものをここにあります：http://i.imgur.com/BhHMv.png

Answer 1

このバイオリンは解決策を示しています。http://jsfiddle.net/wheresrhys/t6pUq/いくつかのポイント

1. display:inline-block

   を使用してそれとしてIE7で上下に動作しません。インラインブロックはデフォルトでdisplay:inlineの要素ではサポートされていません。このシナリオでは、表示ブロックを使用し、logo_wrapperにmargin: x auto 0を設定することが適切です。ここで、xは、ロゴとタイトルを大まかに縦の中央に配置する値です。

2. htmlを少し修正しました。中心に置く必要があるすべての要素の周りにラッパーを追加する必要があります。またコメントによって、inline-block要素の配置に影響を与える空白が防止されます。