CSS에서 이미지를 수직으로 정렬하려면 vertical-align 속성을 사용합니다. 이 속성은 인라인 요소나 테이블 셀 내부에서 요소의 세로 위치를 지정하는 데 활용되며, 텍스트와 함께 배치되는 이미지의 정렬을 조정할 때 특히 유용합니다.
주요 vertical-align 값
- baseline – 부모 요소의 기준선에 맞춰 정렬합니다(기본값).
- text-top – 텍스트의 위쪽에 맞춰 정렬합니다.
- text-bottom – 텍스트의 아래쪽에 맞춰 정렬합니다.
- middle – 부모 요소의 중앙에 맞춰 정렬합니다.
- top / bottom – 라인 박스의 최상단 또는 최하단에 맞춰 정렬합니다.
예제 코드
아래 예제는 vertical-align: text-bottom;을 적용하여 이미지를 텍스트 하단 기준선에 맞춰 수직 정렬하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p>이것은 <img src = "https://www.tutorialspoint.com/videotutorials/assets/videos/courses/155/images/course_155_image.png" alt = "Video Tutorial" width = "200" height = "150"> 데모 이미지입니다.</p>
</body>
</html>위 코드를 실행하면 문장 안의 이미지가 주변 텍스트의 아래쪽 기준선에 맞춰 정렬되는 것을 확인할 수 있습니다. 원하는 정렬 결과에 따라 text-bottom 대신 middle, text-top 등 다른 값을 사용해 보세요.