다음은 질문 형식을 활용하고 문제/해결책을 강조하는 몇 가지 제목 옵션입니다. 직접적이고 간결함: * CSS에서 자식을 가리지 않고 형제를 중앙에 배치하는 방법은 무엇입니까? * 어떻게 예방할 수 있나요?

Overflow:hidden Parent에서 자식을 마스킹하지 않고 형제 중심화 달성

CSS에서 Overflow:hidden 속성은 일반적으로 부모에 사용됩니다. 떠다니는 아이들의 키를 수용할 수 있는 용기. 그러나 margin:auto와 결합하면 흥미로운 효과도 있습니다.

overflow:hidden 및 margin:auto가 있는 컨테이너에 부동된 이전 형제가 있는 경우 부동 요소 옆에 나타납니다. 이렇게 하면 여러 부동 형제 사이에 중앙에 배치할 수 있습니다.

그러나 부동 요소를 가리지 않고 컨테이너 외부에 하위 요소가 표시되어야 하는 경우 이 레이아웃이 중단될 수 있습니다. 컨테이너를 Overflow:visible로 만드는 전통적인 방법은 float 레이아웃을 무시하는 반면, 컨테이너 정리와 확장은 형제 중심 정렬을 방해합니다.

Clearfix를 사용한 솔루션

To 어린이가 컨테이너 외부에서 볼 수 있도록 하면서 중앙 레이아웃을 유지하려면 Clearfix 방법을 사용할 수 있습니다. 상위 항목에 Clearfix 클래스를 추가하고 Overflow:hidden을 제거하면 하위 항목을 마스킹하지 않고도 레이아웃을 유지할 수 있습니다.

clearfix용 CSS는 다음과 같습니다.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

위 내용은 다음은 질문 형식을 활용하고 문제/해결책을 강조하는 몇 가지 제목 옵션입니다. 직접적이고 간결함: * CSS에서 자식을 가리지 않고 형제를 중앙에 배치하는 방법은 무엇입니까? * 어떻게 예방할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!