xhtml 기반에서 valign 기능 구현하기 - CSS 사용

 Internet Explorer 7 이하

• 레이어 두개를 이용하여 top 속성의 값을 %로 조정하는 방법
  
• Source
  

  <div style="margin:auto; position:relative; width:300px; height:300px; border:solid 1px #BBB; text-align:center;">         <div style="position：absolute; top:50%;">             <div style="position:relative; top:-50%;">                 aaa             </div>         </div>     </div>

  
  
• 결과화면
  
  
  
  
  
  

 

2. Internet Explorer 8,, Firefox, Opera, Chrome등에서 사용하는 방법

• display:table 속성을 이용하는 방법
  
• Source
  

  <div style="margin:auto;width:300px; height:300px; border:solid 1px #BBB; display:table; text-align:center;">         <div style="display:table-cell; vertical-align:middle;">             aaa         </div>     </div>

  
  
• 결과화면
  

  Internet Explorer 8

  Firefox

 

3. 1, 2의 혼용

• 표준에 어긋나는 방식이긴 하지만 크로스브라우징을 위한 변형방법
  
• Source

  <div style="margin:auto; #position:relative; width:300px; height:300px; border:solid 1px #BBB; display:table; text-align:center;">         <div style="#position：absolute; #top:50%; display:table-cell; vertical-align:middle;">              <div style="#position:relative; #top:-50%;">                  aaa             </div>         </div>     </div>