텍스트를 세로 정렬하는 방법은 다양한 방법이 존재한다... 간단한 방법으로 line-height 속성을 이용하는 방법이 있고 그 외에도 padding을 적절하게 주거나 "top: 50%;" 등등의 여러가지 방법이 있다. 하지만!!!

오늘 얘기할 부분은 가변 요소... 즉 텍스트가 길이에 따라서 변하는 경우 세로 정렬을 어떻게하는냐에 대한 부분이다.

사실 위에 언급한 방법들은 텍스트가 고정된 값을 가져야 가능하다. 물론 가능할 수도 있지만 텍스트의 개수등에 따라 정렬이 흐트려지는 문제가 발생할 수 있다. 이를 해결할기 위한 방법으로 어떤 방법이 있을까... 이런 고민은 물론 스크립트 언어를 사용함으로써 해결할 수 있을 것이나 개인적으로 css와 html 만으로 해결되는 것이 가능 좋은 방법이라 생각한다. 이 방법은 아래에 기술하여 보았다. 아래를 참고하자.

우리가 원하는 그림은 아래처럼 구현되길 희망한다... 아래 스크린샷을 보자!

스크린샷) 텍스트 길이에 따라 자동으로 세로정렬되는 레이어

# 텍스트 세로정렬 소스코드 예제보기
<div>
   <span class="textWrap">
      <span class="textWrapCell">123</span>
   </span>
</div>

<style type="text/css">
   div {
      height: auto;
      width: auto;
      max-width: 50px;
   }
   .textWrap {
      display: table;
      height: 100%;
   }
   .textWrapCell {
      display: table-cell;
      vertical-align: middle;
   }
</style>

위 코드에서 주의깊게 봐야할 부분은 바로 div 태그안에 텍스트를 감싸는 다른 두개의 span 태그이다.
이 태그는 display 값으로 table, table-cell로 바꾸어 자동으로 중앙정렬 될 수 있도록 변경하는 부분이다. 이 외의 방법도 있겠으나 가장 간단하고 쉬운 방법이라 개인적으로 선호하고 자주 사용한다.