中央にブロックが適用されていますdisplay inline-block

Question

私は今すぐimgを含むdivを持っていますが、試してみるとmargin: 0 autoは動作しません。

<div style="display: inline-block"> 

    <img src=""/> 

</div> 

どのようにしてimgを含むdiv全体を中央に配置できますか？

が

たぶん、あなたはすでに知っているfiddleを参照してください、しかし、IE < 8にdisplay: inline-blockを適用されませんので、これはどこでも動作しないことに注意してください、あなたのインラインブロックのdivの親へ

Answer 1

のdivのコンテナにtext-align: centerを追加します。

<div style="text-align: center"> 
    <div style="display: inline-block"> 
     <img src="..."/> 
    </div> 
</div>​ 

DEMO

Answer 2

ジャストギビングtext-align: centerあなたの<div>要素（と何のハックはあなたを助けることはできません）：インライン：quirksmode

IE 6/7からは唯一の自然な表示を持つ要素の値を受け入れます。

だから私は（簡単なインライン<span>のような）別の要素を使用することをお勧めまたは、あなたはHTML5を使用している場合、新しい利用可能な要素の一つを選ぶ：彼らは古いIEブラウザで認識していないので、あなたは、インラインとしてそれらをスタイルすることができますブロックを問題なく使用できます。このシナリオでは<figure>要素が適しています。

Answer 3

を、あなたのINLINE-BLOCK divの内側に画像をセンターにしたい場合は、あなたがあなたに次のスタイルを割り当てる必要がありますimgタグ

position:relative; 
left: 50%;  
margin-left: -57px; /*Negative half of the width of the image */ 

ここはデモです。 http://jsfiddle.net/5eU3Y/

ただし、CENTER div自体の場合は、コンテナtext-align：center;を割り当てる必要があります。プロパティ。この例を確認してくださいhttp://jsfiddle.net/5eU3Y/1/

しかし、このinline-divブロックを中心にしたい場合は、その幅を知る必要があります。 これを確認してください。 http://jsfiddle.net/5eU3Y/2/