html - 按钮文本未正确放置

Question

我正在使用 CSS 设计一个 ASP:Button 但是 - 不太了解 CSS 我只是无法让文本出现在按钮的中间。

我正在使用这个 CSS

display: block;
float: left;
clear: left;
height: 34px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
vertical-align: super;
line-height: normal;
position: relative;
padding-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-variant: small-caps;
text-transform: capitalize;
color: #000000;

但是，正如您从下图中看到的那样，结果远不能令人满意。如何让文本按照我们的预期出现在按钮中间？

有什么想法吗？

aspx 文件包含这段代码:

<form action="#" method="post">
                <h1>Register</h1>
                <label class="grey" for="signup">Username:</label>
                <input class="field" type="text" name="signup" id="signup" value="" size="23" />
                <label class="grey" for="email">Email:</label>
                <input class="field" type="text" name="email" id="email" size="23" />
                <input type="submit" name="submit" value="Register" class="bt_register" />
            </form>

完整的 .css 在这里:

/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Date: March 26, 2009
Version: 1.0

Copyright 2009 Jeremie Tisseau
"Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
http://www.gnu.org/licenses/gpl-3.0.html
*/

 /***** clearfix *****/
.clear
{
clear: both;
height: 0;
line-height: 0;
 }

 .clearfix:after
 {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

 .clearfix
 {
display: inline-block;
 }
 /* Hides from IE-mac \*/
* html .clearfix
 {
height: 1%;
 }

 .clearfix
 {
display: block;
 }
  /* End hide from IE-mac */
 .clearfix
 {
height: 1%;
 }

 .clearfix
 {
display: block;
 }

 /* Panel Tab/button */
.tab
{
background: url(../images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}

.tab ul.login
{
    display: block;
    position: relative;
    float: right;
    clear: right;
    height: 42px;
    width: auto;
    font-weight: bold;
    line-height: 42px;
    margin: 0;
    right: 150px;
    color: white;
    font-size: 80%;
    text-align: center;
}

    .tab ul.login li.left
    {
        background: url(../images/tab_l.png) no-repeat left 0;
        height: 42px;
        width: 30px;
        padding: 0;
        margin: 0;
        display: block;
        float: left;
    }

    .tab ul.login li.right
    {
        background: url(../images/tab_r.png) no-repeat left 0;
        height: 42px;
        width: 30px;
        padding: 0;
        margin: 0;
        display: block;
        float: left;
    }

    .tab ul.login li
    {
        text-align: left;
        padding: 0 6px;
        display: block;
        float: left;
        height: 42px;
        background: url(../images/tab_m.png) repeat-x 0 0;
    }

        .tab ul.login li a
        {
            color: #15ADFF;
        }

            .tab ul.login li a:hover
            {
                color: white;
            }

.tab .sep
{
    color: #414141;
}

.tab a.open, .tab a.close
{
    height: 20px;
    line-height: 20px !important;
    padding-left: 30px !important;
    cursor: pointer;
    display: block;
    width: 100px;
    position: relative;
    top: 11px;
}

.tab a.open
{
    background: url(../images/bt_open.png) no-repeat left 0;
}

.tab a.close
{
    background: url(../images/bt_close.png) no-repeat left 0;
}

.tab a:hover.open
{
    background: url(../images/bt_open.png) no-repeat left -19px;
}

.tab a:hover.close
{
    background: url(../images/bt_close.png) no-repeat left -19px;
}

/* sliding panel */
#toppanel
{
position: absolute; /*Panel will overlap  content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
 }

 #panel
 {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
 }

#panel h1
{
    font-size: 1.6em;
    padding: 5px 0 10px;
    margin: 0;
    color: white;
}

#panel h2
{
    font-size: 1.2em;
    padding: 10px 0 5px;
    margin: 0;
    color: white;
 }

#panel p
 {
    margin: 5px 0;
    padding: 0;
}

#panel a
{
    text-decoration: none;
    color: #15ADFF;
 }

    #panel a:hover
    {
        color: white;
     }

#panel a-lost-pwd
 {
    display: block;
    float: left;
}

#panel .content
 {
    width: 960px;
    margin: 0 auto;
    padding-top: 15px;
    text-align: left;
    font-size: 0.85em;
 }

    #panel .content .left
    {
         width: 280px;
        float: left;
        padding: 0 15px;
        border-left: 1px solid #333;
    }

    #panel .content .right
     {
        border-right: 1px solid #333;
    }

    #panel .content form
     {
        margin: 0 0 10px 0;
    }

    #panel .content label
     {
        float: left;
        padding-top: 8px;
        clear: both;
        width: 280px;
        display: block;
    }

     #panel .content input.field
    {
        border: 1px #1A1A1A solid;
        background: #414141;
        margin-right: 5px;
        margin-top: 4px;
        width: 200px;
        color: white;
        height: 16px;
    }

    #panel .content input:focus.field
    {
        background: #545454;
    }

    /* BUTTONS */
    /* Login and Register buttons */
    #panel .content input.bt_login, #panel .content input.bt_register
{
display: block;
float: left;
clear: left;
height: 34px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 0px 0 10px;
vertical-align: super;
line-height: 54px;
position: relative;
padding-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-variant: small-caps;
text-transform: capitalize;
color: #000000;
} 

    #panel .content input.bt_login
    {
        width: 74px;
        background: transparent url(../images/bt_login.png) no-repeat 0 0;
    }

    #panel .content input.bt_register
    {
        width: 94px;
        color: white;
        background: transparent url(../images/bt_register.png) no-repeat 0 0;
    }

#panel .lost-pwd
{
    display: block;
    float: left;
    clear: right;
    padding: 15px 5px 0;
    font-size: 0.95em;
    text-decoration: underline;
}

Answer 1

将 line-height: normal; 更改为 line-height: 34px;。如果您使 line-height 与 height 相同，文本将垂直居中。

编辑

您还可以更改按钮的 padding 来调整文本。虽然不是 IMO 的首选方法，但它仍然有效。