Flexbox 대신 CSS 위치 지정을 사용하여 이미지 위에 텍스트를 중앙에 배치하려면 어떻게 해야 합니까?

Flexbox를 사용하여 이미지 중앙에 텍스트 배치

이 가이드에서는 Flexbox 대신 순수 CSS 위치 지정 속성을 사용하여 이미지 위에 텍스트를 중앙에 배치하는 대체 접근 방식을 살펴보겠습니다.

포지셔닝 속성:

.height-100vh {
  position: relative;
}

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

1. 상대 부모 설정: 절대 위치 지정을 위해 위치 지정 상위 항목을 설정하기 위해 height-100vh 클래스가 있는 컨테이너 요소에 position:relative를 설정합니다.
2. 텍스트의 절대 위치 지정: .text에 position:absolute를 사용합니다. 클래스를 사용하여 일반적인 문서 흐름 외부에 배치합니다.
3. 가로 정렬: 왼쪽: 50%로 설정하여 컨테이너의 왼쪽 가장자리에서 측정하여 텍스트를 가로 중앙에 배치합니다.
4. 세로 정렬: 마찬가지로 위쪽: 50%는 텍스트의 위쪽 가장자리에서 측정하여 텍스트를 수직으로 가운데에 배치합니다. 컨테이너.
5. 정확한 센터링: 텍스트를 정확하게 센터링하기 위해 변환: 번역(-50%, -50%)을 적용합니다. 이는 텍스트를 양방향으로 -50% 번역하여 궁극적으로 중앙으로 이동합니다.

사용 예:

<section class="height-100vh center-aligned">
  <img  class="background-image lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="Flexbox 대신 CSS 위치 지정을 사용하여 이미지 위에 텍스트를 중앙에 배치하려면 어떻게 해야 합니까?" >
  <div class="text">SOME TEXT</div>
</section>

이러한 위치 지정 속성을 구현하면 효과적으로 중앙에 배치할 수 있습니다. Flexbox에 의존하지 않고 이미지 위에 텍스트를 추가합니다. 이 접근 방식은 이러한 일반적인 레이아웃 작업에 대한 간단하고 간단한 솔루션을 제공합니다.

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