web-dev-qa-db-ja.com

自動マージンはページの中央に画像を配置しません

この例 では、画像は中央に配置されません。どうして？ブラウザはIEではなく、Windows 7のGoogle Chrome v10です。

<img src="/img/logo.png" style="margin:0px auto;"/>
cssgoogle-chromemargincentering
96
Web_Designer

display:block;を追加すると機能します。画像はデフォルトでインラインです

明確にするために、block要素のデフォルトの幅はautoです。これはもちろん、含まれる要素の利用可能な幅全体を埋めます。

マージンをautoに設定することにより、ブラウザーは残りのスペースの半分をmargin-leftに割り当て、残りの半分をmargin-rightに割り当てます。

212
Ross

一部の状況（IE、Gecko、Webkitの以前のバージョンなど）および継承では、top、right、bottom、およびleftが設定されていなくても、position:relative;を含む要素はmargin:0 auto;を使用できません。

要素をposition:static;（デフォルト）に設定すると、これらの状況で修正される場合があります。一般に、指定された幅のブロックレベル要素は、relativeまたはstaticのいずれかの配置を使用して、margin:0 auto;を尊重します。

14
Brendan

display:table;を使用して自動幅divを中央に配置できます

div{
margin: 0px auto;
float: none;
display: table;
}
11
sameeuor

私の場合、問題は、幅自体なしで最小および最大幅を設定していたことでした。

10
Daniel Sitarz

幅を追加せずにmargin:autoを追加するときはいつでも、うまくいかないと思います。私の経験からです。幅は、等しいマージンを提供する必要がある正確な場所を示します。

6
tejaswini pant

margin-left:auto; margin-right: auto;を使用するものには、margin:0 auto;またはposition:absolute;に代わるものがあります。これは次の方法です。
要素の左位置を50％（left:50%;）に設定しましたが、要素が正しく中央に配置されるように正しく中央に配置されません。幅、要素を完全に中央に配置します

以下に例を示します。 http://jsfiddle.net/35ERq/3/

2
Andrei

これをボディのcssに配置します。background：＃3D668F;次に追加：display：block;マージン：自動; imgのcssへ。

0
Gail

bootstrapボタンの場合：

display: table; 
margin: 0 auto;
0
Abram