[css] 자동 여백이 페이지의 중앙에 있지 않음

에서는 이미지 중심 아니다. 왜? 내 브라우저는 IE가 아닌 Windows 7의 Google Chrome v10입니다.

<img src="/img/logo.png" style="margin:0px auto;"/>



답변

추가 display:block;하면 작동합니다. 이미지는 기본적으로 인라인입니다.

명확히하기 위해 block요소 의 기본 너비 는이며 auto, 물론 포함하는 요소의 사용 가능한 전체 너비를 채 웁니다.

에 여백을 설정함으로써 auto반 브라우저 양수인에 남은 공간, margin-left그리고에 나머지 절반 margin-right.


답변

어떤 상황에서 상속 (예 : IE, 도마뱀 붙이, 웹킷의 이전 버전으로)을 가진 요소는 position:relative;방지 할 수 있습니다 margin:0 auto;경우에도 작동 top, right, bottom, 그리고이 left설정되지 않습니다.

요소를 position:static;(기본값) 로 설정하면 이러한 상황에서 문제가 해결 될 수 있습니다. 일반적으로 지정된 너비를 가진 블록 레벨 요소 margin:0 auto;relative또는 static위치 지정을 사용합니다 .


답변

자동 너비 div를 중앙에 배치 할 수 있습니다. display:table;

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


답변

제 경우 문제는 너비 자체 없이 최소 및 최대 너비 를 설정했다는 것입니다.


답변

너비를 추가하지 않고 추가 할 때마다 margin:auto작동하지 않을 것이라고 생각합니다. 제 경험입니다. 너비는 정확히 동일한 여백을 제공해야하는 위치에 대한 아이디어를 제공합니다.


답변

에 대한 대안이 margin-left:auto; margin-right: auto;또는 margin:0 auto;사용하는 사람을위한 position:absolute;이 어떻게되어
(당신이 50 %로 요소의 왼쪽 위치를 설정left:50%; )하지만 올바르게 중심되는 요소의 순서를 제대로 중심을하지 않습니다 당신은 그것을 줄 필요 너비의 절반을 뺀 여백은 요소를 완벽하게 중앙에 배치합니다.

다음은 예입니다. http://jsfiddle.net/35ERq/3/


답변

부트 스트랩 버튼의 경우 :

display: table;
margin: 0 auto;