관리 메뉴

I LOVE EJ

[IE6,IE7] vertical-align (IE6과 7버전 css핵을 사용한 DIV 내부 내용 세로 가운데 정렬) 본문

Web publishing/웹 표준

[IE6,IE7] vertical-align (IE6과 7버전 css핵을 사용한 DIV 내부 내용 세로 가운데 정렬)

BeOne 2013. 3. 13. 13:53

E6과 7버전 css핵을 사용한 DIV 내부 내용 세로 가운데 정렬.

 

table을 쓰는 것이 더 편하지만, 이런 꼼수도 있다.

 

 

가운데 정렬

 

 


<style type="text/css">
<!--
#wrap {width:50%; height:150px; border:1px solid #ccc; display:table; #position:relative; #overflow:hidden;}
#cells {display:table-cell; vertical-align:middle; #position:absolute; #top:50%;}
#cont {#position:relative; #display:block; #top:-50%;}
-->
</style>

 

<div id="wrap">
  <div id="cells">
    <div id="cont"><div>가운데 정렬</div></div>
  </div>
</div>