div의 세로 가운데 텍스트?

Question

난 내 div의 중앙에 세로로 텍스트를 가운데에 배치 할 수 없습니다. 상단에 떠있는 상태로 유지됩니다. 여기 내 코드는 다음과 같습니다 CSS

.dialer{ 
background-image: url('http://v4m.mobi/php/fb/images/close.png'); 
background-repeat: none; 
width: 100; 
height: 40; 
margin: 0 auto; 
-moz-box-shadow: 0 12px 8px -8px rgba(0,0,0,0.7); 
-webkit-box-shadow: 0 12px 8px -8px rgba(0,0,0,0.7); 
box-shadow: 0 12px 8px -8px rgba(0,0,0,0.7); 
text-align: center; 
}  

HTML

<div class="dialer" align="center"><a href="http://v4m.mobi/php/fb/index.php" 
style="color: #ffffff; font-size: 18px; font-weight: bold; text-decoration: none; 
margin-top: 20px;">Close App</a></div> 

어떤 제안?

는

Answer 1

이

http://css-tricks.com/vertically-center-multi-lined-text/

Answer 2

.dialer에 vertical-align: middle; 추가 감사드립니다.

높이와 너비에 대한 고정 값을 가지고 있으므로 margin: auto auto; 할 수도 있습니다. 그래도 px, % 또는 원하는 용도와 같이 값의 '유형'을 지정해야합니다.

은 또한 다음과 같은 상대 위치를 할 수있는 다음 태그에서 "20 픽셀 여백 탑", 다음과 같이 사용합니다

.dialer { 
    ... 
    position: relative; 
    top: 47%; 
} 

Answer 3

은 제거

.dialer { 
    ... 
    height: 40px; 
} 

.dialer a { 
    line-height: 40px; 
} 

을 ... 텍스트가 한 줄에 들어간다는 것을 알고있는 경우에만 작동합니다.

Answer 4

다음은 작동하는 피들입니다. http://jsfiddle.net/PvVr6/4/ 바이너리 콘텐츠로도 작동하도록 바이올린을 업데이트했습니다.

.dialer{ 
     ... 
     width: 100px; 
     height: 40px; 
     ... 
     vertical-align: middle; 
    } 

    .dialer a { 
     display: inline-block; 
    }