에서 무엇 auto을 margin:0 auto;합니까?
나는 무엇을하는지 이해할 수없는 것 같다 auto. 나는 그것이 때때로 물체를 중앙에 맞추는 효과가 있다는 것을 알고 있습니다. 감사.
답변
width적용한 개체에를 지정 margin: 0 auto하면 개체가 상위 컨테이너의 중앙에 위치합니다.
auto두 번째 매개 변수로 지정 하면 기본적으로 브라우저가 왼쪽 및 오른쪽 여백 자체를 자동으로 결정하도록 지시하며이를 동일하게 설정하여 수행합니다. 왼쪽과 오른쪽 여백이 동일한 크기로 설정되도록 보장합니다. 첫 번째 매개 변수 0은 위쪽 및 아래쪽 여백이 모두 0으로 설정됨을 나타냅니다.
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;따라서, 당신에게주는 예를 들어 부모가 100 픽셀이고 아이가, 50 픽셀 인 다음 경우, auto속성 사이의 공유에 여유 공간이 50 픽셀이 있다고 결정합니다 margin-left및 margin-right:
var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;다음을 제공합니다.
margin-left:25;
margin-right:25;이 jsFiddle을 살펴보십시오 . 부모 너비를 지정할 필요는없고 자식 개체의 너비 만 지정할 수 있습니다.
답변
자동 : 브라우저가 여백을 설정합니다. 그 결과는 브라우저에 따라 다릅니다.
margin : 0 자동 지정
* top and bottom margins are 0
* right and left margins are auto답변
일반 흐름에서 대체되지 않는 블록 수준 요소의 너비 및 여백 계산 에 대한 CSS 사양에서 :
‘왼쪽 마진’과 ‘오른쪽 마진’이 모두 ‘자동’이면 사용 된 값이 동일합니다. 이것은 컨테 이닝 블록의 가장자리를 기준으로 요소를 수평 중앙에 배치합니다.
답변
margin:0 auto;0위-아래 및 auto왼쪽-오른쪽입니다. 이는 요소의 너비와 컨테이너의 너비에 따라 좌우 여백이 자동 여백을 차지한다는 것을 의미합니다.
일반적으로 요소를 중앙 위치에 배치하려면 margin:auto완벽하게 작동합니다. 그러나 블록 요소에서만 작동합니다.
답변
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;0은 위아래, 자동은 왼쪽-오른쪽입니다. 브라우저가 여백을 설정합니다.
답변
두 값이 어떻게 작동하는지에 대한 설명이 더 명확 해집니다.
margin 속성은 다음과 같은 약어입니다.
margin-top
margin-right
margin-bottom
margin-left그렇다면 왜 두 가지 가치 만있는 것일까 요?
다음과 같은 네 가지 값으로 여백을 표현할 수 있습니다.
margin: 10px, 20px, 15px, 5px;이는 10px 상단, 20px 오른쪽, 15px 하단, 5px 왼쪽을 의미합니다.
마찬가지로 다음과 같은 두 가지 값으로 표현할 수도 있습니다.
margin: 20px 10px;이렇게하면 위쪽과 아래쪽에 20px, 왼쪽과 오른쪽에 10px의 여백이 제공됩니다.
설정 한 경우 :
margin: 20px auto;그러면 상단 및 하단 여백이 20px이고 왼쪽 및 오른쪽 여백이 자동으로 표시됩니다. 자동은 컨테이너를 기준으로 왼쪽 / 오른쪽 여백이 자동으로 설정됨을 의미합니다. 요소가 블록 유형 요소, 즉 상자이고 뷰의 전체 너비를 차지하는 경우 auto는 왼쪽 및 오른쪽 여백을 동일하게 설정하므로 요소가 중앙에 배치됩니다.
답변
“가운데”태그 대신 사용하기가 매우 어렵습니다. 깨진 테이블과 블록 및 텍스트에 대해 작동하지 않는 센터링이 필요할 때 유용합니다.
