table의 td는 style의 vertical-align을 지정하여, 텍스트와 이미지를 배치할 수 있지만,
div 태그안에서는 vertical-align이 적용되지 않습니다.
div에 vertical-align을 지정하려면 아래와 같이 합니다.
x:left, y:bottom 정렬
<div style="display: table; width: 500px; height: 100px; #position: relative; overflow: hidden; border: 1px solid red;">
<div style=" #position: absolute; #top: 100%; display: table-cell; vertical-align: bottom;">
<div style=" #position: relative; #top: -100%">
내용을 하단으로...
</div>
</div>
</div>
x:center, y:bottom 정렬
<div style="display: table; width: 500px; height: 100px; #position: relative; overflow: hidden; border: 1px solid red;">
<div style=" #position: absolute; #top: 100%; #left: 50%; display: table-cell; vertical-align: bottom; text-align: center;">
<div style=" #position: relative; #top: -100%; #left: -50%;">
내용을 하단 중앙으로...
</div>
</div>
</div>
x:center, y:center 정렬
<div style="display: table; width: 500px; height: 100px; #position: relative; overflow: hidden; border: 1px solid red;">
<div style=" #position: absolute; #top: 50%; #left: 50%; display: table-cell; vertical-align: middle; text-align: center;">
<div style=" #position: relative; #top: -50%; #left: -50%;">
내용을 가운데로...
</div>
</div>
</div>
display: table;은 table 태그 이외의 것을 table처럼 화면에 표시하도록 합니다.
그리고 display: table-cell;이 적용된 태그는 테이블의 셀과 동일하게 취급하기 때문에
td와 마찬가지로 vertical-align을 사용할 수 있습니다.
하지만 IE에서는 display: table;과 display: table-cell;을 모두 지원하지 않기 때문에,
CSS # 핵(#position과 #top, #left)을 이용해서 텍스트의 위치를 배치하고,
IE 이외의 브라우저에서는 vertical-align과 text-align 값으로 위치를 조정합니다.