浮動小数点：ラインの高さでアンカーが伸びる右

Question

の中に私のanchorを中（垂直）に配置したいと思います。 私はdivの中に他の内容があるのでdisplay:table/table-cellを使うことができないので、私はline-heightが最良の選択肢だと考えました。

私の問題は、floatedの場合にのみ、line-heightを入れたときにanchorが伸びてしまうということです。

HTML：

<div class="fixed"> 
    <a class="btn" href="#">btn1</a> 
</div> 

CSS：

.fixed 
{ 
    height: 100px; 
    width: 100%; 
    background-color:grey; 
    position:fixed; 
} 

.btn 
{ 
    padding: 3px 9px; 
    background-color:red; 
    color:white; 
    line-height:100px; 
    float:right; 
} 

JSfiddle：https://jsfiddle.net/828zrzrk/

Answer 1

追加表示：ブロック; パディング値を変更します。

は

.fixed 
 
{ 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color:grey; 
 
    position:fixed; 
 
    top:0;left:0; 
 
} 
 

 
.btn 
 
{ 
 
    display:block; 
 
    padding: 0 9px; 
 
    background-color:red; 
 
    color:white; 
 
    line-height:100px; 
 
    float:right; 
 
}

<div class="fixed"> 
 
    <a class="btn" href="#">btn1</a> 
 
</div>

Answer 2

これは何が必要でしょうか？

`` ` .btn {

** 
width: WIDTH; 
height: HEIGHT; 
position: absolute; 
left: 50%; 
top: 50%; 
margin-top: -WIDTH/2; 
margin-left: -HEIGHT/2; 

} ` ``

Demo