<a>中的文本標記不是垂直居中的

我已經使用了下面的代碼，並且我正在深入探討爲什麼「上傳」文本會呈現在線？<a>中的文本標記不是垂直居中的

<form id="form1" runat="server"> 
<table style="width: 100%; direction: rtl;"> 
    <tr> 
     <td style="width: 100px; margin: 0px 5px 0px 5px;"> 
      <div style="text-align:center;display:block;position: relative; height: 30px;" onclick="inform();"> 
       <a runat="server" id="UploadBtn" class="btn">Upload</a>      
      </div> 
     </td> 
    </tr> 
</table>

用下面CSS：

.btn{ 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    background-color: #a19e86; 
    background-image: -moz-radial-gradient(center -100%, ellipse cover, #a19e86, #5e5c49 100%); 
    background-image: -webkit-radial-gradient(center -100%, ellipse cover, #a19e86, #5e5c49 100%); 
    background-image: -o-radial-gradient(center -100%, ellipse cover, #a19e86, #5e5c49 100%); 
    background-image: -ms-radial-gradient(center -100%, ellipse cover, #a19e86, #5e5c49 100%); 
    background-image: radial-gradient(center -100%, ellipse cover, #a19e86, #5e5c49 100%); 
    border: none; 
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); 
    color: #fff; 
    display: inline-block; 
    font-size: 16px; 
    font-style: italic; 
    font-family: 'Crimson Text' , times; 
    text-decoration: none; 
    -webkit-font-smoothing: antialiased; 
} 

#UploadBtn{ 
    height: 30px; 
    width: 100px; 
    z-index: 10001; 
    top: 0px; 
    line-height: 20px; 
}

來源

2013-07-31 Yasser Sobhdel

如果你要垂直居中使用line-height，那麼你應該使用line-height值等於<a>的height文本（30PX ） - 現在你只能將它設置爲20px。

#UploadBtn { 
    height: 30px; 
    width: 100px; 
    z-index: 10001; 
    top: 0px; 
    line-height: 30px; 
}

http://jsfiddle.net/4GJS9/1/

來源

2013-07-31 16:36:18 Adrift

<a>中的文本標記不是垂直居中的

回答

相關問題