div로 세로 정렬 해결법 css코딩[핵]

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 값으로 위치를 조정합니다.

-출처 : http://blog.naver.com/hee0133?Redirect=Log&logNo=120117010679

 

[출처] div로 css코딩을 하는데.. 세로 정렬 해결법|작성자 버블버블