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

CSS "왼쪽" 속성이 작동하지 않음

"왼쪽" 속성을 사용하여 요소를 상위 요소의 가운데에 정렬하려고 할 때 , 요소가 올바르게 배치되지 않으면 오류가 발생할 수 있습니다.

두 개의 div가 있는 시나리오를 생각해 보세요. 다른 하나. 내부 div의 왼쪽 테두리를 상위 div 내 중앙에 맞추려면 일반적으로 다음 CSS를 사용합니다.

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   left: 50%;
}

그러나 내부 div에 정의된 위치가 없으면 이 코드가 작동하지 않을 수 있습니다. 기본적으로 요소의 위치는 "정적"이므로 절대 위치 지정이 허용되지 않습니다.

이 문제를 해결하려면 내부 div의 위치를 ​​"절대" 또는 "상대"로 설정해야 합니다. 이를 통해 "왼쪽" 속성을 사용하여 상위 div 내의 요소 위치를 지정할 수 있습니다.

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

위치를 "절대"로 설정하면 내부 div가 일반 문서 흐름에서 분리되어 절대 좌표를 사용하여 위치를 지정합니다. 이제 "왼쪽" 속성은 상위 div의 왼쪽 가장자리로부터의 수평 오프셋으로 해석되어 내부 div를 효과적으로 중앙에 배치합니다.

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