내 CSS '왼쪽' 속성이 내 요소를 중앙에 배치하지 않는 이유는 무엇입니까?

CSS "left" 속성이 작동하지 않음

CSS에서 "left" 속성은 포함 요소를 기준으로 요소의 가로 위치를 제어하는 ​​데 사용됩니다. 그러나 "왼쪽" 속성이 올바르게 작동하려면 포함 요소에 정의된 너비, 높이 및 위치가 있는지 확인하는 것이 중요합니다.

제공된 코드 예제를 참조하면 하위 요소의 위치를 ​​지정하려고 합니다. "왼쪽: 50%"를 사용하여 왼쪽 가장자리가 상위 div의 중앙과 정렬되도록 상위 div("외부") 내의 div("내부"). 그러나 제공하신 코드는 하위 div를 올바르게 정렬하지 않습니다.

수정 방법:

하위 div를 올바르게 배치하려면 다음 이외의 위치를 ​​지정해야 합니다. 포함 div에 대한 "정적"("외부"). 이는 "정적" 위치가 HTML 요소의 기본값이고 정확한 위치 지정을 허용하지 않기 때문입니다.

조정된 코드:

#outher {
   width: 1000px;
   height: 1000px;
   background-color: #ccc;
   position: relative; // Add this line
}

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   position: absolute; // Add this line
   left: 50%;
}

설정에 따라 하위 div에 대해 "위치" 속성을 "절대"로 설정하고 포함 div에 대해 "상대" 속성을 설정하면 "왼쪽" 속성에 대한 적절한 참조 지점을 설정합니다. 이렇게 하면 하위 div가 포함된 div를 기준으로 배치되고 왼쪽 가장자리가 의도한 대로 상위 div의 중앙에 정렬됩니다.

위 내용은 내 CSS '왼쪽' 속성이 내 요소를 중앙에 배치하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!