vertical-align 속성은 인라인 요소에 적용하는것과 셀 요소에 적용하는것은 값의 의미에 차이가 있다 먼저 인라인 요소에 적용하는 경우 속성값에 대한 의미는 다음과 같다.
baseline : 인라인박스의 베이스라인을 부모박스의 베이스라인에 정렬한다. 인라인박스에 베이스라인이 존재하지 않으면 그 박스의 아랫변을 부모박스의 베이스라인에 정렬한다.
middle : 인라인박스의 중심선을 부모박스의 베이스라인에서 소문자 'x' 높이의 반(즉 0.5ex분)을 올린다.
sub : 인라인박스의 베이스라인을 부모박스의 아래첨자 문자로서 적절한 위치까지 내린다.
super : 인라인박스의 베이스라인을 부모박스의 위첨자 문자로서 적절한 위치까지 올린다.
text-top : 인라인박스의 윗변을 부모 요소의 글꼴의 윗변에 정렬한다.
text-bottom : 인라인박스의 아랫변을 부모 요소의 글꼴의 아랫변에 정렬한다.
top : 인라인박스의 윗변을 행박스의 윗변에 정렬한다.
bottom : 인라인박스의 아랫변을 행박스의 아랫변에 정렬한다.
길이 : 그 길이만큼 박스를 올린다, 마이너스 값일 때는 내린다. 0 은 baseline 을 지정한 것과 같은 의미다.
퍼센테이지 : 그 값을 line-height 속성 값에 곱한 거리만큼 박스를 올린다, 마이너스 값일 때는 내린다. 0은 baseline를 지정한 것과 같은 의미다.
인라인 요소에 vertical-align 속성 값이 'top', 'bottom' 이외를 지정하는 경우에는 부모 인라인 요소나 인라인박스를 생성하는 부모 블록 레벨요소를 참조할 수 있는 때에만 효과가 있다. 왜냐하면 'top', 'bottom', 이외의 값은 부모박스를 기준으로 수직위치를 결정하기 때문이며, 부모박스가 존재하지 않는 때는 그 기준이 없는 것과 같기 때문이다.
셀 요소에 적용하는 경우 속성값에 대한 의미는 다음과 같다.
baseline : 셀의 베이스라인을 그 셀이 걸치는 최초의 행의 베이스라인에 정렬한다.
middle : 셀의 중심선을 그 셀이 걸치는 행 전체의 중심선에 정렬한다.
top : 셀의 위선을 그 셀이 걸치는 최초의 행의 위선에 정렬한다.
bottom : 셀의 아래선을 그 셀이 걸치는 최후의 행의 아래선에 정렬한다.