내용: http://phrogz.net/css/vertical-align/index.html
A. HTML 레이아웃은 전통적으로 수직의 행동을 명세하기 위해 설계되어있지는 않다. 이런 본연의 성질 때문에 폭(넓이)를 확장하고, 컨텐트는 가능한 넓이 위에서 적절한 높이를 기반으로 흐르게 된다. 수평의 사이징과 레이아웃은 쉽다. 수직의 사이징과 레이아웃은 이것으로 부터 상속받는다.
B. vertical-algin:middle 이 원하는대로 동작하지 않는 이유는 잘 이해하지 못했기 때문인데..
C. 이것은 CSS 스펙이 망쳐놨기 때문이라 생각.. vertical-align은 어디에서 쓰이냐 에 따라서 완전히 다른 두 개의 행동을 정의한다.
vertical-align in table cells
테이블 셀에서 vertical-align은 대부분의 사람들이 기대하는대로 동작한다. 즉 지금은 사용하지 말아야 할 valign 속성과 동작이 같다. 표준을 따르는 요즘의 브라우저에서 아래의 3 줄 코드는 똑같은 일을 한다: (사각형의 셀 내부의 텍스트는 수직 가운데 정렬이 됨)
<td valign="middle"></td>
<td style="vertical-align:middle"</td>
<div style="display:table-cell; vertical-align:middle"></div>
vertical-algin on inline elements
하지만, vertical-align이 inline 엘리먼트에 적용되면 완전히 다르게 동작한다. 이 상황에서는 이제는 사용하지 말아야 할 (deprecated) <img>의 align 속성 처럼 동작하게 된다. 현대의 표준을 따르는 브라우저에서 아래 세 줄의 코드는 모두 같은 동작을 하게 된다:
<img align="middle">
<img style="vertical-align:middle">
<span style="display:inline-block; vertical-align:middle">foo<br>bar</span>
이 CSS 속성은 다른 종류의 어떤 엘리먼트에는 소용없다(?).