왜 내 '여백: 0 자동'이 100% 너비 상위 내 요소 중심에 있지 않습니까?

"margin: 0 auto;"를 사용하여 요소를 중앙에 배치하는 이유 100% 너비 내에서 상위가 작동하지 않습니다

문제 설명:

이 시나리오를 고려하십시오. 너비가 100%로 설정되고 순서가 지정되지 않은 상위 ​​div가 있습니다. 그 안에 나열해 보세요. "margin: 0 auto;"를 적용했습니다. 정렬되지 않은 목록으로 중앙에 배치했지만 움직이지 않았습니다.

문제 원인:

문제의 핵심은 다음을 정의했다는 사실에 있습니다. 중앙에 배치하려는 요소가 아닌 상위 div의 너비입니다. "여백: 0 자동;" 효과적으로 작동하려면 중앙에 배치되는 요소의 너비를 지정해야 합니다.

해결책:

이 문제를 해결하려면 순서가 지정되지 않은 목록에 너비를 할당하세요.

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

추가 고려 사항:

더 우아한 외관을 얻으려면 다음 개선 사항을 고려하세요.

• "float: left;" 제거 "li" 요소의 속성은 "display: inline"과 충돌하여 IE6 및 이전 브라우저에서 의도하지 않은 여백을 두 배로 늘립니다.
• 아래 스타일 속성을 "li" 요소에 직접 적용하세요.

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

위 내용은 왜 내 '여백: 0 자동'이 100% 너비 상위 내 요소 중심에 있지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!