DIV, SPAN 태그 등의 텍스트를 수직 가운데로 정열 하는 다양한 방법이 있는데요. 텍스트는 기본적으로 왼쪽 상단에 위치하게 되고 가로 정열의 경우에는 text-align 을 이용하여 중앙이든 오른쪽 정열이든 간편하게 가능하지만 세로의 경우에는 이와 다른 방법으로 적용하게 됩니다.
이미지 옆에 문구를 이미지 세로 크기 기준으로 중앙 정렬을 할 때는 이미지 높이 맞는 line-height 값을 주거나 padding 값 지정하면 어렵지 않게 적용할 수이지만, 텍스트가 한 줄이나 두 줄 등으로 지정되어 있지 않고 상황에 따라 변경되는 경우에는 vertical-align: middle로 유동성이 있는 요소에도 중앙에 오게 정열이 가능합니다.
<img src="https://.." style="width="200" height="138"> <div style="line-height: 138px ">TEXT</div> line-height 속성으로 가운데 정렬을 할 경우에는 1 줄일 때는 높이만 적용해주면 간편하게 적용할 수 있다는 장점이 있습니다만, 두 줄 이상의 글에는 적용이 어렵습니다.
환경 변화에 의해 두 줄이 될 경우 높이를 지정한 만큼 아래로 밀려서 한 줄이 더 생겨버게 됩니다.
<img src="https://.." style="width="200" height="138"> <div style="padding: 55px ">TEXT</div>padding으로 정렬을 할 경우에도 적당한 값을 구하면 간편하게 적용할 수 있지만 두 줄이거나 그 이상 많을 때는 그에 맞추어 값을 변경해줘야 합니다.
줄 변화가 있을 시에 line-height 만큼은 아니지만 글의 높이만큼 아래로 밀려나게 됩니다. 환경 변화가 없는 고정일 경우에는 큰 문제가 없지만 긴 글일 경우 반응형 웹으로 본문 폭이 줄어들 때 글이 밀면서 줄이 더 생겨 중앙에서 아래로 어긋나는 현상이 생깁니다.
<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줄까지 다양한데 지정된 높이 내에서 줄 수와 상관없이 중앙에 맞춰주기 때문에 변수가 많은 글일 경우에는 이 방법으로 수직 세로 정열을 할 경우에 가장 효과적으로 적용할 수 있습니다.