Button Text not placing correctly - html

Question

I am using CSS to design an ASP:Button however - not knowing CSS very well I just can not get the text to appear in the middle of the button.
I am using this 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;
However, as you can see from the image below the result is far from satisfactory. How do I get the text to appear in the middle of the button as we would expect?
Any ideas?
The aspx file contains this code:
<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>
The full .css is here:
/*
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

Change line-height: normal; to line-height: 34px;. If you make the line-height the same as the height the text will center vertically.
Edit
You can also change the padding of the button to adjust the text. Although not the prefered method IMO, it will still work.

Answer 2

Thanks for the help.
What I ended up doing was removing the form and changing this
<input class="field" type="text" name="signup" id="signup" value="" size="23" />
To an Asp:Button and assigning the css to it's class. like this
<asp:Button ID="signup" runat="server" class="button"/>
Which did the trick.