크기를 조정하는 동안 수평 중앙에 있는 삼각형 포인터가 이동하는 이유는 무엇입니까?

화면 크기 조정 중 삼각형 포인터의 수평 중심 조정 문제 발생

문제 설명

사용자가 삼각형을 수평 중앙에 배치하려고 합니다. 컨테이너 요소 내의 포인터입니다. 특정 창 크기에서는 성공했지만 창 크기가 조정되면 포인터가 정렬에서 벗어났습니다.

해결책

문제 이해:

포인터를 왼쪽 중앙에 두려는 초기 시도: 48%는 왼쪽 가장자리를 기준으로 포인터를 배치합니다. 이 접근 방식은 요소의 너비를 고려하지 않으므로 창 크기가 변경되면 정렬이 잘못됩니다.

변환을 사용하여 가운데 맞춤 달성:

삼각형을 적절하게 가운데에 맞추려면 변환 속성을 사용하는 것이 좋습니다:

.triangle {
   position: absolute;
   left: 50%;
   transform: translate(-50%,0);
}

이 규칙은 삼각형의 위치를 ​​50%만큼 이동합니다. 너비를 컨테이너 내에서 효과적으로 중앙에 배치합니다.

변환과 회전 결합:

이 특정 시나리오에서 삼각형 요소에는 회전(45deg) 변환도 있습니다. 적용된. 그러나 CSS 캐스케이드 규칙은 첫 번째 변환을 두 번째 변환으로 재정의하여 수평 중심을 방지합니다.

이 문제를 해결하려면 변환 함수를 연결하세요.

.container::before {
    left: 50%;
    transform: translate(-50%,0) rotate(45deg);
}

여러 변환 함수를 함께 사용할 수 있습니다. 나열된 순서대로 적용됩니다. 이 경우 번역이 먼저 적용된 다음 회전이 적용됩니다.

전체 코드 조각:

body {
    background: #333333;
}

.container {
    width: 98%;
    height: 80px;
    line-height: 80px;
    position: relative;
    top: 20px;
    min-width: 250px;
    margin-top: 50px;
}

.container-decor {
    border: 4px solid #C2E1F5;
    color: #fff;
    font-family: times;
    font-size: 1.1em;
    background: #88B7D5;
    text-align: justify;
}

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

<div class="container container-decor">great distance</div>

위 내용은 크기를 조정하는 동안 수평 중앙에 있는 삼각형 포인터가 이동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!