창 크기 조정 중에 삼각형 요소를 수평으로 완벽하게 중앙에 배치하는 방법은 무엇입니까?

창 크기 조정 중 요소의 수평 중심 유지

문제:
CSS를 통해 요소의 수평 중심 조정 특히 삼각형이 있는 요소의 경우 창 크기를 조정할 때 까다로울 수 있습니다. Shape.

문제 해결:
창 크기에 관계없이 요소가 가로 중앙에 유지되도록 하려면 올바른 CSS 속성을 사용하고 요소 위치 지정이 작동하는 방식을 이해하는 것이 중요합니다. left: 50% 설정은 직관적으로 보일 수 있지만 실제로는 중앙이 아닌 왼쪽 가장자리를 기준으로 요소를 배치합니다.

해결책: 변환 및 변환
진정한 수평 중심을 달성하려면 , 변환: 번역() 속성을 사용하는 것이 일반적입니다. 이 속성은 요소가 너비의 지정된 비율만큼 뒤로 이동하여 효과적으로 원하는 축의 중심에 오도록 지시합니다.

기존 코드에 변환 적용
제공된 코드에서, 삼각형 요소는 처음에 왼쪽: 48%에 배치되어 중앙에 가깝지만 잘못 배치됩니다. 이를 조정하려면 변환: 변환(-50%, 0) 규칙을 사용하여 요소를 너비의 50%만큼 뒤로 이동하여 완벽하게 중앙에 위치하도록 할 수 있습니다.

체인 변환
그러나 제공된 코드에는 변환: 변환(-50%, 0) 이전에 적용되는 변환: 회전(45deg) 속성도 포함되어 있습니다. 이로 인해 CSS 계단식으로 인해 변환: 번역() 규칙이 무시됩니다.

이를 설명하기 위해 변환 속성의 기능 연결 기능을 사용하여 두 변환을 결합할 수 있습니다. 삼각형 요소에 대한 최종 CSS 규칙은 다음과 같습니다.

.container::before {
    top: -33px;
    left: 50%;
    transform: translate(-50%, 0) rotate(45deg);
    position: absolute;
    border: solid #C2E1F5;
    border-width: 4px 0 0 4px;
    background: #88B7D5;
    content: '';
    width: 56px;
    height: 56px;
}

변환 함수를 이 순서로 연결하여(translate() 먼저, 그다음에rotate()) 요소가 먼저 뒤로 이동하는지 확인합니다. 너비의 50%만큼 늘린 다음 45도만큼 회전합니다. 이렇게 하면 창 크기가 조정되더라도 삼각형이 수평 중앙에 유지됩니다.

위 내용은 창 크기 조정 중에 삼각형 요소를 수평으로 완벽하게 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!