Question

我使用了以下代码，我深深地想要为什么“上传”文本是在线渲染的？

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

Answer 1

如果您要使用line-height将文字垂直居中，那么您应使用的line-height值等于height的{{1}}（30px ） - 现在你只将它设置为20px。

<a>

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

<a> tag is not vertically centered</a>中的文字

1 个答案: