私はこの構成を複製しようとしています：http： //kaitnieks.com/images/divme.png
質問は2つの部分で構成されています。
1）赤い画像と青いテキストを含めるのに必要なサイズに拡大する中央のボックスを作成する方法。
2）上記のボックスを緑色のボックスの内側で水平方向と垂直方向の両方の中央に配置する方法。
追加要件：ソリューションはIE7で正常に機能する必要があり、IE6でもある程度機能する必要があります（不完全な場合もありますが、要素は少なくとも表示されている必要があります）。
Webで説明されている手法の1つを使用して＃2を実行できる可能性がありますが、直感的には簡単な方法のように思えますが、＃1についてはよくわかりません。
まず、インライン要素を使用します。IE7では、display: inline-block自然にインラインである要素に対してのみ機能するためです（きれいではありませんが、ブロックレベルの要素を含めることができます。そうしないことにしました）。小さな箱のサイズを設定し、-height/2上マージンを設定して、途中に配置します。
＃2については、緑の高さが固定されている場合、全体がインラインブロックであるため、次のように更新できます。を要素の高さに設定しline-height、黒を垂直方向の中央に配置します。必要に応じて、をtext-align: centerオンに設定することもでき.greenます。
IE7がmin-heightをサポートしていないことを忘れました。コンテナに緑の高さのパディングを追加し、テキストブロックに負のマージンを追加したので、コンテナに表示されません。
最小の高さを修正した最後のフィドル（IE7はそれをサポートしていません。また、をクリックしてテキストの長さを変更することもできますblue）。
ただし、を追加する 必要が.containerあります。そうしないと、中央に配置されません。
1）幅や高さを設定しない場合、要素はコンテンツに合わせてサイズを自動的に調整します
2）ボックスを水平方向に中央揃えにすることが可能であるはずです。ただし、高さが可変の場合は、垂直方向の中央に配置するためのJavaScriptが必要になります。したがって、javascriptを使用してボックス全体の配置を行うこともできます。
可変の高さで垂直に中央に配置するのは雌犬です。あなたがcssだけでそれを試すことを主張するならば、このリンクは良い読み物です。
