div 내부에 (수평/수직) 링크 배치

Question

div 내부에 링크를 세로 및 가로로 가운데 맞춤해야합니다.

내 CSS는

:

는

.div { 
     display:block; 
     background:red; 
     width:162px; 
     height:168px; 
    } 
    .span { } 
    .link { } 

내 HTML은 :

는

<div class="div"> 
     <span class="span"> 
      <a href="#" class="link"> Text in middle </a> 
     </span> 
    </div> 

링크 : 당신의 예를 들어, 사용중인 코딩을 바탕으로 http://jsfiddle.net/pjWUC/

Answer 1

는 :

Updated jsFiddle example - a 요소이다 수직 및 수평 중심 계정.

.div { 
    display:table; 
    background:red; 
    width:162px; 
    height:168px; 
} 
.span { 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
} 

Answer 2

.div { 
    display:table-cell; 
    text-align: center; 
    vertical-align: middle; 
    ... 
} 

불행히도, 디스플레이 : 테이블 셀 this에 따른 IE를 지원하지 않습니다.