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

Flexbox 및 CSS 위치 지정에서 이미지 중앙에 텍스트 배치

이미지 위에 텍스트를 중앙에 배치하는 것은 일반적인 레이아웃 요구 사항입니다. Flexbox는 강력한 정렬 옵션을 제공하지만 CSS 위치 지정 속성을 사용하여 이 효과를 얻을 수도 있습니다.

절대 위치 지정 사용

절대 위치 지정을 사용하여 이미지 중앙에 텍스트를 배치하려면:

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

• 절대 위치 조상을 설정하기 위해 몸체에 정적 위치 값을 설정합니다. 위치 지정.
• 텍스트 요소의 위치를 ​​절대적으로 지정합니다.
• 텍스트를 수평으로 왼쪽 중앙에 배치: 50%; 수직으로 중앙에 위치: 50%;.
• 변환을 사용하여 너비와 높이의 절반을 변환하여 중앙에 미세 조정합니다.

Flexbox 사용

또는 Flexbox를 이미지와 텍스트 모두에 사용할 수 있습니다. positioning:

body {
  margin: 0px;
}
...
.height-100vh {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
...
.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}
.center-aligned {
  display: flex;
  align-items: center;
  justify-content: center;
}

• Flexbox 컨테이너의 이미지와 텍스트 요소를 높이 속성으로 래핑합니다.
• align-items 설정: center; 내용 정당화: 센터; 컨테이너 내에서 항목을 수직 및 수평으로 정렬합니다.
• 컨테이너 내에서 텍스트 요소의 위치를 ​​결정하고 원하는 대로 스타일을 지정합니다.

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