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

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

---

에서는 예 이미지 중심 아니다. 왜? 내 브라우저는 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;

---

이것을 본문의 CSS에 넣으십시오 : background : # 3D668F; 다음 추가 : 표시 : 블록; 여백 : 자동; img의 CSS에.

참고 URL : https://stackoverflow.com/questions/5734199/auto-margins-dont-center-image-in-page