왜 `margin: 0 auto`가 내 요소를 중앙에 배치하지 않습니까?

Margin: 0 Auto가 요소를 중앙에 배치하지 않는 이유

margin: 0 auto 속성을 사용하여 요소를 가로로 정렬하려고 할 때, 상위 요소가 아닌 중앙에 있는 요소의 너비를 지정하는 것이 중요합니다.

고려하세요. 다음 상황: 너비가 정의되어 있고 그 안에 순서가 지정되지 않은 목록(

)이 있는 상위 컨테이너 요소(#header)가 있습니다.
요소는 margin: 0 auto를 적용하여 #header div 내에서 가로 중앙에 위치해야 합니다. 그러나
요소의 경우 상위 컨테이너의 중앙에 위치하지 않습니다.

이 문제를 해결하려면

예를 들어,

#header ul {
  margin: 0 auto;
  width: 90%;
}

이것은

요소에 90%의 너비를 할당합니다. 요소를 #header div 내 중앙에 배치합니다.

향상된 레이아웃(편집)을 위해 업데이트된 CSS:

#header ul {
  list-style: none;
  margin: 0 auto;
  width: 90%;
}

#header ul li {
  color: #CCCCCC;
  display: inline;
  font-size: 20px;
  padding-right: 20px;
}

이러한 수정된 스타일은 요소가 중앙에 있고 해당 목록 항목이 인라인으로 표시되어 float: left; 사용으로 인해 발생하는 모든 문제가 제거됩니다.

이전 버전의 Internet Explorer에서는 가로 여백이 두 배로 늘어나는 것을 방지합니다.

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