본문 바로가기
블로그&인터넷/CSS

텍스트 세로 중앙 정렬하는 방법 CSS

by INKman 2018. 12. 24.
반응형

DIV, SPAN 태그 등의 텍스트를 수직 가운데로 정열 하는 다양한 방법이 있는데요. 텍스트는 기본적으로 왼쪽 상단에 위치하게 되고 가로 정열의 경우에는 text-align 을 이용하여 중앙이든 오른쪽 정열이든 간편하게 가능하지만 세로의 경우에는 이와 다른 방법으로 적용하게 됩니다.



TEXT

이미지 옆에 문구를 이미지 세로 크기 기준으로 중앙 정렬을 할 때는 이미지 높이 맞는 line-height 값을 주거나 padding 값 지정하면 어렵지 않게 적용할 수이지만, 텍스트가 한 줄이나 두 줄 등으로 지정되어 있지 않고 상황에 따라 변경되는 경우에는 vertical-align: middle로 유동성이 있는 요소에도 중앙에 오게 정열이 가능합니다.



line-height: value
TEXT
<img src="https://.." style="width="200" height="138">
<div style="line-height: 138px ">TEXT</div>

line-height 속성으로 가운데 정렬을 할 경우에는 1 줄일 때는 높이만 적용해주면 간편하게 적용할 수 있다는 장점이 있습니다만, 두 줄 이상의 글에는 적용이 어렵습니다.



TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

환경 변화에 의해 두 줄이 될 경우 높이를 지정한 만큼 아래로 밀려서 한 줄이 더 생겨버게 됩니다.



padding: value
TEXT
<img src="https://.." style="width="200" height="138">
<div style="padding: 55px ">TEXT</div>

padding으로 정렬을 할 경우에도 적당한 값을 구하면 간편하게 적용할 수 있지만 두 줄이거나 그 이상 많을 때는 그에 맞추어 값을 변경해줘야 합니다. 



TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

줄 변화가 있을 시에 line-height 만큼은 아니지만 글의 높이만큼 아래로 밀려나게 됩니다. 환경 변화가 없는 고정일 경우에는 큰 문제가 없지만 긴 글일 경우 반응형 웹으로 본문 폭이 줄어들 때 글이 밀면서 줄이 더 생겨 중앙에서 아래로 어긋나는 현상이 생깁니다.



vertical-align: middle
TEXT
<img src="https://.." style="width="200" height="138">
<div style="display: table-cell; vertical-align: middle; height: 138px">TEXT</div>

vertical-align 속성을 사용하기 위해서는 높이와 display 속성을 table-cell로 변경해 줘야 합니다.



최근 게시글 목록의 경우 글 제목의 길이가 일정하지 않기 때문에 1줄에서 3줄까지 다양한데 지정된 높이 내에서 줄 수와 상관없이 중앙에 맞춰주기 때문에 변수가 많은 글일 경우에는 이 방법으로 수직 세로 정열을 할 경우에 가장 효과적으로 적용할 수 있습니다.

반응형

댓글0