왜 `margin: 0 auto;`가 정렬되지 않은 목록을 중앙에 배치하지 않습니까?

왜 Margin: 0 Auto로 요소를 중앙에 배치할 수 없습니까?

헤더 내에서 순서가 지정되지 않은 목록을 중앙에 배치하려고 합니다. 여백을 사용하는 div: 0 자동. 그러나 margin auto만으로는 센터링이 충분하지 않습니다. 그 이유는 다음과 같습니다.

여백 자동 이해

margin: 0 auto는 왼쪽 및 오른쪽 여백을 자동으로 설정하여 요소가 가로 중앙에 배치되도록 합니다. 그러나 이는 요소의 너비가 명시적으로 정의된 경우에만 작동합니다.

코드 내:

#header ul {
  margin: 0 auto;
}

헤더 div의 너비를 정의했지만 순서가 지정되지 않은 목록의 너비가 아닙니다. 따라서 margin: 0 auto는 목록을 중앙에 맞추는 데 아무런 영향을 미치지 않습니다.

해결책:

목록을 중앙에 맞추려면 너비를 명시적으로 정의해야 합니다.

#header ul {
  margin: 0 auto;
  width: 620px;  // or any desired width
}

추가 고려 사항:

목록 내에서 목록 항목과 같은 요소를 가로 가운데에 배치하려면 너비를 정의하고 display: inline 또는 float: left를 사용하세요. 그러나 플로팅 요소는 예상치 못한 방식으로 동작할 수 있으므로 일반적으로 인라인을 사용하는 것이 좋습니다.

예를 들어 목록 항목을 중앙에 배치하려면 다음과 같이 하세요.

#header ul li {
  display: inline;
}

위 내용은 왜 `margin: 0 auto;`가 정렬되지 않은 목록을 중앙에 배치하지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!