특히 화면 크기 조정 중에 회전된 요소를 중앙에 완벽하게 배치하려면 어떻게 해야 합니까?

특히 화면 크기 조정 시 중심 요소가 중심을 피합니다.

삼각형 포인터의 수평 정렬은 특히 창 크기 조정 중에 계속 파악하기 어렵습니다.

범인은 실수로 왼쪽을 사용하는 것입니다. 48%를 중앙에 두는 것입니다. 삼각형. 이는 요소를 중앙에 배치하는 것처럼 보이지만 실제로는 포인터의 왼쪽 가장자리를 컨테이너 중앙 근처에 배치합니다.

실제 중앙 정렬의 경우 올바른 접근 방식은 왼쪽: 50%입니다. 이는 포인터의 중심을 컨테이너 중심과 정렬합니다. 컨테이너. 그러나 이로 인해 새로운 문제가 발생합니다. 왼쪽: 50%를 사용할 때 요소가 오른쪽으로 이동합니다.

해결책은 변환(-50%,0)과 함께 변환 속성을 활용하는 것입니다. 이 규칙은 삼각형이 너비의 50%만큼 왼쪽으로 이동하도록 지시하여 이전과 같은 선의 중앙에 효과적으로 배치합니다.

그러나 이 특정한 경우에는 변환: 회전(45deg) 및 변환: 변환을 모두 적용합니다. (-50%,0)은 도전 과제입니다. 캐스케이드는 두 번째 변환 규칙을 재정의하여 무효화합니다.

이 문제를 해결하려면 변환 함수 연결이 필요합니다. 수정된 코드는 다음과 같습니다.

.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;
}

이 수정된 코드는 이제 삼각형 포인터의 중심을 정확하게 맞추고 화면 크기가 조정되더라도 위치를 유지합니다.

위 내용은 특히 화면 크기 조정 중에 회전된 요소를 중앙에 완벽하게 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!