> 웹 프론트엔드 > CSS 튜토리얼 > 'margin: 0 auto' 요소를 가운데에 배치하는 방법과 항상 작동하지 않는 이유는 무엇입니까?

'margin: 0 auto' 요소를 가운데에 배치하는 방법과 항상 작동하지 않는 이유는 무엇입니까?

Patricia Arquette
풀어 주다: 2024-12-14 12:35:12
원래의
736명이 탐색했습니다.

How Does `margin: 0 auto` Center Elements, and Why Doesn't It Always Work?

여백: 0 자동 설명이 있는 중앙 요소 설명

CSS에서 개발자는 종종 여백: 0 자동을 사용하여 요소를 중앙 정렬하는 데 어려움을 겪습니다. 완벽한 센터링을 달성하려면 이 속성이 어떻게 작동하는지 이해하는 것이 중요합니다.

Margin: 0 Auto 작동 방식

margin: 0 auto는 텍스트의 가로 여백을 자동으로 조정합니다. 요소가 포함된 요소나 뷰포트 내에서 수평 중앙에 위치하는지 확인하세요. 이 기술은 대상 요소의 너비를 특정 값으로 설정하는 데 의존하며 일반적으로 상위 요소 너비의 백분율로 표시됩니다.

중앙에 위치하지 않는 이유

If margin: 0 auto는 요소를 중앙에 배치하지 않습니다. 이는 일반적으로 대상 요소의 너비가 정의되지 않았기 때문입니다. 제공된 코드 예제에서 #header div의 너비는 100%이지만, 가운데에 배치하려는 #header ul에는 정의된 너비가 없습니다.

해결책

#header div 내에서 순서가 지정되지 않은 목록을 중앙에 배치하려면 #header ul의 너비를 지정해야 합니다. 다음은 필요한 조정이 포함된 업데이트된 코드 버전입니다.

#header ul {
  margin: 0 auto;
  width: 90%;
}
로그인 후 복사

#header ul의 너비를 상위 너비의 90%로 설정하여 여백을 사용하여 중앙에 배치할 수 있는 충분한 공간을 확보합니다. : 0 자동. 이렇게 하면 목록이 #header div 내에서 가로 중앙에 위치하게 됩니다.

위 내용은 'margin: 0 auto' 요소를 가운데에 배치하는 방법과 항상 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿