Flexbox 또는 CSS 위치 지정을 사용하여 이미지 위에 텍스트를 중앙에 배치하는 방법은 무엇입니까?

Flexbox를 사용하여 이미지 위에 텍스트 가운데 정렬

질문: Flexbox를 사용하여 이미지 위에 텍스트를 가운데 정렬하려면 어떻게 해야 합니까? ?

대안 해결 방법:

Flexbox를 사용하는 것은 옵션이지만 이미지 위 중앙에 텍스트를 배치할 필요는 없습니다. CSS 위치 속성은 보다 간단한 솔루션을 제공합니다.

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

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

1. CSS 컨테이너 설정: 두 방법 모두 콘텐츠 위치를 지정하려면 CSS 컨테이너(높이-100vh)가 필요합니다.
2. 절대 위치 지정: 텍스트 요소가 컨테이너 내에서 절대 위치에 지정됩니다.
3. 가로 및 세로 정렬: 왼쪽: 50%; 최고: 50%; 텍스트 요소를 가로 및 세로로 가운데에 배치합니다.
4. 정확한 가운데 맞춤: 변환 속성은 두 축에서 요소를 50% 뒤로 이동하여 위치를 미세 조정합니다.

Flexbox 해결 방법:

Flexbox를 선호하는 경우 텍스트를 중앙에 배치하는 방법은 다음과 같습니다. image:

.height-100vh {
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

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

1. Flex 컨테이너: 컨테이너(높이-100vh)는 수직 flex 방향의 flex 컨테이너로 설정됩니다.
2. 텍스트 위치 지정: 이전과 마찬가지로 텍스트 요소는 왼쪽: 50%, 위쪽: 50%, 변환: 번역(-50%, -50%).
3. 주축 정렬: align-items: center; 플렉스 컨테이너 내에서 콘텐츠를 세로 중앙에 배치합니다.

두 방법 모두 작동하지만 CSS 위치 지정 접근 방식이 더 간단하고 이미지 위에 텍스트를 정렬할 때 Flexbox가 필요하지 않습니다.

위 내용은 Flexbox 또는 CSS 위치 지정을 사용하여 이미지 위에 텍스트를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!