Flexbox 및 CSS 위치 지정에서 이미지 중앙에 텍스트 배치
이미지 위에 텍스트를 중앙에 배치하는 것은 일반적인 레이아웃 요구 사항입니다. Flexbox는 강력한 정렬 옵션을 제공하지만 CSS 위치 지정 속성을 사용하여 이 효과를 얻을 수도 있습니다.
절대 위치 지정 사용
절대 위치 지정을 사용하여 이미지 중앙에 텍스트를 배치하려면:
1 2 3 4 5 6 7 8 9 10 | body {
position: relative;
}
...
.text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
|
로그인 후 복사
- 절대 위치 조상을 설정하기 위해 몸체에 정적 위치 값을 설정합니다. 위치 지정.
- 텍스트 요소의 위치를 절대적으로 지정합니다.
- 텍스트를 수평으로 왼쪽 중앙에 배치: 50%; 수직으로 중앙에 위치: 50%;.
- 변환을 사용하여 너비와 높이의 절반을 변환하여 중앙에 미세 조정합니다.
Flexbox 사용
또는 Flexbox를 이미지와 텍스트 모두에 사용할 수 있습니다. positioning:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!