CSS를 사용해 이미지 중앙에 텍스트 배치하는 방법
웹 페이지에서 이미지 위에 텍스트를 정중앙에 배치하고 싶다면 CSS의 transform 속성을 활용하면 됩니다. 핵심 원리는 다음과 같습니다.
- 이미지와 텍스트를 감싸는 부모 요소에
position: relative를 지정합니다. - 텍스트 요소에는
position: absolute를 적용하고left: 50%,top: 50%으로 위치를 지정합니다. transform: translate(-50%, -50%)를 사용하면 텍스트 자체의 크기만큼 뒤로 이동시켜 완벽한 중앙 정렬이 가능합니다.
예제 코드
아래 코드를 실행하면 이미지 중앙에 텍스트가 배치된 결과를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the center of an image:</p>
<div class = "container">
<img src = "trolltunga.jpg" alt = "Norway" width = "1000" height = "300">
<div class = "topleft">Center</div>
</div>
</body>
</html>코드 설명
.container 클래스는 이미지와 텍스트를 함께 감싸는 기준점 역할을 하며, position: relative로 설정되어 있습니다. 그 안의 .topleft 텍스트 요소는 position: absolute로 부모 컨테이너를 기준으로 배치됩니다.
여기서 left: 50%와 top: 50%만 적용하면 텍스트의 왼쪽 상단 모서리가 이미지의 중앙에 오게 되어 어긋나 보입니다. 따라서 transform: translate(-50%, -50%)를 추가하여 텍스트 너비와 높이의 절반만큼 각각 왼쪽과 위로 이동시키면, 텍스트가 이미지의 정확한 중앙에 위치하게 됩니다.
또한 이미지에 opacity: 0.3을 적용하면 배경이 살짝 흐려져 텍스트가 더욱 잘 보이는 효과를 얻을 수 있습니다.