'margin: 0 auto;'는 어떻게 컨테이너 내에서 요소를 중앙에 배치합니까?

자동: 컨테이너 내 요소 중심 맞추기

두 번째 매개변수로 auto를 사용하여 여백 속성을 정의하면 스타일이 지정되는 요소가 쉽게 지정됩니다. 상위 컨테이너의 중앙에 위치합니다. 이는 다음과 같은 이유로 발생합니다:

• 자동 계산: 브라우저는 자동으로 왼쪽과 오른쪽 여백을 결정하여 사용 가능한 공간을 균등하게 나눕니다.
• 동일 여백: 대칭을 보장하기 위해 왼쪽과 오른쪽 여백의 크기가 동일함을 보장합니다. positioning.

여백 속성 분석:

margin: 0 auto;

• 0은 위쪽 및 아래쪽 여백을 0으로 설정합니다.
• auto 자동으로 왼쪽 및 오른쪽 여백을 계산하여 중앙에 배치합니다. element.

예:

너비가 100px인 상위 컨테이너와 너비가 50px인 하위 요소를 생각해 보세요. 자동 속성은 하위 요소의 여백 사이의 사용 가능한 공간을 계산합니다.

freeSpace = 100 - 50 = 50px
equalShare = 50 / 2 = 25px

결과적으로:

margin-left: 25px
margin-right: 25px

이제 하위 요소가 상위 컨테이너 내 중앙에 배치됩니다. 이 위치 지정은 이 [jsFiddle](jsFiddle 링크)을 통해 실제로 관찰될 수 있습니다. 자동 속성을 적용하려면 하위 개체의 너비만 지정하면 됩니다.

위 내용은 'margin: 0 auto;'는 어떻게 컨테이너 내에서 요소를 중앙에 배치합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!