Flexbox를 사용하지 않고 이미지 위에 텍스트를 중앙에 배치하려면 어떻게 해야 합니까?

Flexbox에서 이미지 중앙에 텍스트 배치

다용도 레이아웃 시스템인 Flexbox는 콘텐츠 정렬에 널리 사용됩니다. 그러나 이미지 위에 텍스트를 중앙에 배치하는 특정 작업의 경우 CSS 위치 지정 속성이 더 간단하고 효과적인 솔루션을 제공합니다.

이미지 위에 텍스트를 중앙에 배치하려면 Flexbox가 필요하지 않습니다. 다음 단계를 따르세요.

1. 가장 가까운 위치의 조상 설정: position:relative 속성을 외부 컨테이너(이 예에서는 .height-100vh)에 할당하여 가장 가까운 위치의 조상을 설정합니다. 절대 위치 지정을 위해.
2. 텍스트에 절대 위치 지정 사용: 텍스트 컨테이너 제공 (div.text) 위치: 절대 속성입니다. 이를 통해 상위 요소를 기준으로 텍스트의 위치를 ​​정확하게 지정할 수 있습니다.
3. 가로 및 세로 정렬: 왼쪽: 50% 및 위쪽: 50%로 설정하여 텍스트를 가로 및 세로로 정렬합니다. 상위 컨테이너.
4. 정확하게 중앙: 번역 변환 적용(변환: 옮기다(-50%, -50%);) 위치를 미세 조정하여 정확한 중심 맞춤을 위해 요소의 너비와 높이를 절반으로 차지합니다.

다음은 이러한 개념을 활용하여 업데이트된 CSS 스니펫입니다.

.height-100vh {
    height: 100vh;
    position: relative;
}

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

이 방법은 Flexbox가 필요 없이 이미지 위에 텍스트를 효과적으로 중앙에 배치합니다. 정확한 정렬을 보장하고 여러 브라우저에서 작동하므로 정렬 요구 사항에 맞는 신뢰할 수 있는 솔루션입니다.

위 내용은 Flexbox를 사용하지 않고 이미지 위에 텍스트를 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!