형제 너비가 같지 않은 가로 레이아웃에서 중간 항목을 가운데에 맞추는 방법은 무엇입니까?

형제 너비가 다양한 중간 항목의 중앙 정렬 유지

이 질문은 측면 항목의 너비는 다를 수 있습니다. 원하는 효과는 측면 항목의 크기가 동일하지 않은 경우에도 중간 항목이 중앙에 유지되도록 하는 것입니다.

이를 달성하기 위해 중첩된 Flexbox 접근 방식이 사용됩니다. 다음 CSS 규칙은 솔루션의 핵심을 구성합니다.

.container {
    display: flex;
}

.box {
    flex: 1;
    display: flex;
    justify-content: center;
}

.box:first-child > div { margin-right: auto; }

.box:last-child > div { margin-left: auto; }

컨테이너 내에서 각 상자에는 1의 플렉스가 부여되어 사용 가능한 공간을 비례적으로 공유합니다. 그런 다음 각 상자는 내용을 중앙에 배치하기 위해 justify-content: center를 사용하는 플렉스 컨테이너로 표시됩니다.

첫 번째 상자의 경우 margin-right: auto를 사용하여 하위 요소에 오른쪽 여백이 적용되고, 반대로, margin-left: auto를 사용하여 왼쪽 여백이 마지막 상자의 하위 요소에 적용됩니다. 이렇게 하면 여백이 자동으로 늘어나 내용을 각 가장자리로 밀어 중앙 상자를 효과적으로 중앙에 정렬할 수 있습니다.

이 솔루션은 원하는 효과를 달성하여 너비에 관계없이 가운데 항목이 중앙에 유지되도록 합니다. 형제 상자. 추가적인 스크립팅이나 절대 위치 지정이 필요 없는 순수한 CSS 솔루션입니다.

위 내용은 형제 너비가 같지 않은 가로 레이아웃에서 중간 항목을 가운데에 맞추는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!