자동 여백이 페이지의 중앙에 있지 않음
에서는 예 이미지 중심 아니다. 왜? 내 브라우저는 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
'Programing' 카테고리의 다른 글
ID에 대한 변수를 사용하여 jQuery에서 요소를 어떻게 선택합니까? (0) | 2020.08.24 |
---|---|
데이터베이스없이 Ruby on Rails를 구성하는 방법은 무엇입니까? (0) | 2020.08.24 |
한 번에 여러 파일의 EOL 변경 (0) | 2020.08.24 |
Android 정적 개체 수명주기 (0) | 2020.08.24 |
투명한 배경이있는 Swift Modal View Controller (0) | 2020.08.24 |