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; 
} 

...これは、テキストが1行に収まることがわかっている場合にのみ機能します。

Answer 4

ここでは動作しているフィドルです：http://jsfiddle.net/PvVr6/4/ フィリピンを更新して複数行のコンテンツでも動作するようにしました。

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

    .dialer a { 
     display: inline-block; 
    }