divの中心に画像を揃える方法は？

divの画像を中央に揃えようとしています。私は次のことを試しましたが、うまくいきませんでした。これを修正する方法を教えてください。前もって感謝します。divの中心に画像を揃える方法は？

<div class="erabox"><img src="indicator2.gif" alt="1910 to 1919" width="229" height="38" /></div>

出典

2011-12-27 Vinoth Kumar

クラス 'erabox'のコードは何ですか？ –

あなたのクラスの 'erabox'コードはどこですか？ –

CSSで以下のコードを試してください。それはちょうどあなたがあなたのdivタグでstyle="text-align:center"を

出典

2011-12-27 08:51:42

CSS

.erabox{ 
    position:relative; 
} 

.erabox img{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin-top:-19px; /* Half of images height */ 
    margin-left:-115px; /* Half of images width */ 
}

出典

2011-12-27 08:55:26

PLZこのコードを試し

–

絶対配置では、ドキュメントの内容の流れからイメージが削除されます。このような単純な水平センタリング作業のための過度の可能性があります。 –

画像が水平方向だけでなく垂直方向にも揃っているので、親divの高さと幅が分かっていると思います。私の解決策は、 'display：table-cell'の代わりに、ie7で動作しない –

<div class="erabox" style="text-align:center"><img src="indicator2.gif" alt="1910 to 1919" width="229" height="38" /></div>

が必要 ALIGN = "absmiddle" 確実に動作します。

出典

2011-12-27 08:55:29

テキストアラインメントセンターのみが動作しないことです。あなたはまた、左または右からマージンまたはパディングを与える必要がありますし、あなたはイメージを中央に置くでしょう。 –

が動作しない –

@Pro ..なぜ「margin」か「padding」を使用する必要がありますか？私は 'text-align：center'は' 'の水平方向に最適だと思います。 –

次のCSSコードを試してみてください。それはあなたの<img>を水平に整列させ、垂直方向に整列させます。

.erabox{ 
    width:200px; 
    height:200px; 
    display:table-cell; 
    text-align:center; 
    vertical-align:middle; 
}

出典

2011-12-27 09:07:47

ya ..................正常に動作します –

だけマージンautoを使用する：

.erabox img { 
    display: block; 
    margin: auto; 
    }

DEMO：http://jsbin.com/apiwox/edit#html,live

出典

2011-12-27 09:12:41 Burntime

.eraboxのdiv要素の幅と高さが固定されているか、少なくともそれは、高さだと幅が常に画像のあなたができるよりも確実に大きい場合画像を背景に使用する

HTML

<div class="erabox"></div>

CSS

.erabox{ 
    background:url("indicator2.gif") no-repeat; 
    background-position:50% 50%; 
}

出典

2011-12-27 09:33:45

divの中心に画像を揃える方法は？

答えて

関連する問題