divの上にイメージを中心にする

私はそれにたくさんのものを持ったdivを持っています。私がしたいのは、その上にイメージを置くことです。上記（画像が66px X 66px BTWである）の画面で画像を中央に、私はそれが親のdivとその上に「フローティング」に対する中心になるでしょうdivの上にイメージを中心にする

<div> 
    <img style="display:block; position: absolute; top:50%; left:50%; margin-top:-33px; margin-left:-33px;" src="Images/ajax-loader_001.gif" /> 
    <!-- a bunch of tables and stuff that doesn't have a conveniently fixed size --> 
</div>

：私の基本的なレイアウトは、次のようになります。これを行うための純粋なCSSの方法はありますか？ IE8と最近のFirefoxのバージョンで動作する必要があります。

編集：明確にするために - 私はの両方をに置き、親の上に置いてください。

出典

2012-03-14 Matt Burland

あなたの親のdivに 'position：relative;'をつける必要があります。 –

@Scott：それはそうしました。ありがとう。あなたが答えをしたいなら、私はそれを受け入れるでしょう。 –

はちょうどあなたの親のdivの上にこれを配置する必要があります。

position: relative;

出典

2012-03-14 19:50:14

すべての絶対位置のものを削除し、代わりにこの IMG { ディスプレイ行う必要があります。ブロックを。 margin：0 auto; }

出典

2012-03-14 19:45:25

文書の流れから取り除き、他の要素の上に表示するには、絶対位置が必要です。また、私は水平にも垂直にもセンターしたい。その点を明確にするために質問を編集します。 –

は、あなたが使用することができます。

<div> 
    <img style="display:block; position: relative; margin:auto" src="Images/ajax-loader_001.gif" /> 
    <!-- a bunch of tables and stuff that doesn't have a conveniently fixed size --> 
</div>

これは確かに動作します。

出典

2012-12-20 15:27:32

divの上にイメージを中心にする

答えて

関連する問題