내 하위 요소가 '왼쪽: 50%'로 왼쪽으로 정렬되지 않는 이유는 무엇입니까?

CSS '왼쪽' 속성이 예상대로 정렬되지 않음

"왼쪽: 50%" 속성을 적용하여 하위 요소를 상위 요소의 경우 하위 요소가 예상대로 정렬되지 않는 경우가 발생할 수 있습니다. 이러한 불일치는 CSS 위치 지정이 특정 기준에 따라 작동하기 때문에 발생합니다.

CSS 위치 지정 이해

제공된 코드 조각에서 두 div에 대한 CSS 스타일을 지정했습니다. "외부"(부모) 및 "내부"(자식). 하위 div의 CSS에는 "left: 50%"가 포함되어 있으며 상위 div 내에서 하위의 왼쪽 테두리를 중앙에 배치하려고 합니다. 그러나 이 접근 방식은 "위치" 속성이 누락되어 실패합니다.

'위치' 속성 추가

"왼쪽" 속성을 적용하려면 다음을 수행해야 합니다. 하위 div의 "위치" 속성을 정의합니다. 이 속성은 요소의 위치 지정 동작을 지정합니다. 두 가지 주요 옵션이 있습니다:

• 절대: 문서의 일반적인 흐름에서 요소를 제거하고 가장 가까운 위치의 상위 항목(예: "outher")을 기준으로 위치를 지정합니다. case).
• relative: 문서 흐름의 일반 위치를 기준으로 요소의 위치를 ​​지정합니다.

수정된 코드 조각

"위치: 절대;"를 추가하여 속성을 자식 div에 추가하면 "left: 50%" 속성이 부모 div 내에서 자식의 왼쪽 테두리 중앙에 위치하도록 할 수 있습니다.

#inner {
   position: absolute;
   left: 50%;
}

시각적 확인을 위한 데모

수정된 CSS가 의도한 대로 상위 div 내의 하위 div를 중앙에 배치하는 방법을 보려면 http://jsfiddle.net/vrse2/6/에서 업데이트된 데모를 참조하세요.

위 내용은 내 하위 요소가 '왼쪽: 50%'로 왼쪽으로 정렬되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!