웹 개발에서 종종 텍스트를 수직으로 정렬해야 하는 경우가 있습니다. 가운데 정렬, 위쪽 또는 아래쪽 정렬 등 다양한 방식이 있습니다. 이번 글에서는 CSS를 사용하여 텍스트를 수직으로 정렬하는 방법에 대해 알아보겠습니다.
1. line-height 속성 활용하기
line-height
속성을 사용하면 한 줄의 높이를 지정할 수 있습니다. 이 속성을 요소의 높이와 동일하게 설정하면 텍스트가 수직으로 가운데 정렬됩니다.
.vertical-center {
line-height: 200px; /* 요소의 높이와 동일 */
height: 200px;
}
2. padding 활용하기
요소의 padding
을 조절하여 텍스트를 수직으로 정렬할 수 있습니다. 예를 들어, 텍스트를 수직 중앙에 위치시키려면 padding-top
과 padding-bottom
을 동일한 값으로 설정하면 됩니다.
.vertical-center {
padding: 70px 0; /* 요소 높이의 절반만큼 패딩 설정 */
}
3. position과 transform 활용하기
position
과 transform
을 함께 사용하면 텍스트를 수직으로 정렬할 수 있습니다. 부모 요소에 position: relative;
를 설정하고, 자식 요소에 position: absolute;
와 transform: translateY(-50%);
를 설정하면 텍스트가 수직 중앙에 위치합니다.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
4. Flexbox 활용하기
Flexbox는 요소를 정렬하는 데 매우 유용한 도구입니다. 부모 요소에 display: flex;
와 align-items: center;
를 설정하면 자식 요소들이 수직 중앙에 정렬됩니다.
.parent {
display: flex;
align-items: center;
}
5. Grid 활용하기
CSS Grid도 요소를 정렬하는 데 사용할 수 있습니다. 부모 요소에 display: grid;
와 align-items: center;
를 설정하면 자식 요소들이 수직 중앙에 정렬됩니다.
.parent {
display: grid;
align-items: center;
}
이상으로 CSS를 사용하여 텍스트를 수직으로 정렬하는 다양한 방법을 살펴보았습니다. 상황에 맞게 적절한 방법을 선택하여 사용하면 됩니다.