답변:
추가 display:block;하면 작동합니다. 이미지는 기본적으로 인라인입니다.
명확히하기 위해 block요소 의 기본 너비 는이며 auto, 물론 포함하는 요소의 사용 가능한 전체 너비를 채 웁니다.
에 여백을 설정함으로써 auto반 브라우저 양수인에 남은 공간, margin-left그리고에 나머지 절반 margin-right.
margin:auto흐름에서 항목을 중앙에 배치하는 데 필요한 사항에 대해 자세히 설명하면 훌륭한 답변이 될 것 입니다. ( display:block또는 display:table, position:static또는 position:relative등)
0px auto그냥 auto바꾸어도 안됩니다.
어떤 상황에서 상속 (예 : IE, 도마뱀 붙이, 웹킷의 이전 버전으로)을 가진 요소는 position:relative;방지 할 수 있습니다 margin:0 auto;경우에도 작동 top, right, bottom, 그리고이 left설정되지 않습니다.
요소를 position:static;(기본값) 로 설정하면 이러한 상황에서 문제가 해결 될 수 있습니다. 일반적으로 지정된 너비를 가진 블록 레벨 요소 margin:0 auto;는 relative또는 static위치 지정을 사용합니다 .
margin: 0 auto그들은 더 플로트와 지정된 폭 블록 요소는 다음과 같이 ... 긴 상대적 위치 요소에 잘 작동합니다
float및 display그 동작을 변경할 수 있습니다.
자동 너비 div를 중앙에 배치 할 수 있습니다. display:table;
div{
margin: 0px auto;
float: none;
display: table;
}제 경우 문제는 너비 자체 없이 최소 및 최대 너비 를 설정했다는 것입니다.
position:static, 고정이 width:세트를 할 display:block요소
너비를 추가하지 않고 추가 할 때마다 margin:auto작동하지 않을 것이라고 생각합니다. 제 경험입니다. 너비는 정확히 동일한 여백을 제공해야하는 위치에 대한 아이디어를 제공합니다.
에 대한 대안이 margin-left:auto; margin-right: auto;또는 margin:0 auto;사용하는 사람을위한 position:absolute;이 어떻게되어
(당신이 50 %로 요소의 왼쪽 위치를 설정left:50%; )하지만 올바르게 중심되는 요소의 순서를 제대로 중심을하지 않습니다 당신은 그것을 줄 필요 너비의 절반을 뺀 여백은 요소를 완벽하게 중앙에 배치합니다.
다음은 예입니다. http://jsfiddle.net/35ERq/3/