aligning text in a button

[freelance84]

I've got a button using css:

#button-submit_1 {
cursor:pointer;
width:80px;
height: 24px;
margin-right:auto;
margin-left:auto;
color:#666666;
text-align: center;
font-size: small;
vertical-align: middle;
background-color: #CCCCCC;
    }

 

But how do i get the text to be vertically in the middle?

[n000bie]

add

line-height:24px;

[freelance84]

That hasn't worked. The button in the page looks like this:

 

<td><button id="button-submit_1" type="submit">login</button></td>

 

After adding the the new line to the css, it looks like:

#button-submit_1 {
cursor:pointer;
width:80px;
height: 24px;
line-height:24px;
margin-right:auto;
margin-left:auto;
color:#666666;
text-align: center;
font-size: small;
vertical-align: middle;
background-color: #CCCCCC;
    }

 

The 'g' in login on the button touches the bottom of the button and doesn't look very good. I've tried changing loads of settings but i can't get it to lift up. 

[n000bie]

try this, used padding instead of height (hope this works)

 

#button-submit_1 {
  cursor:pointer;
   width:80px;
   margin-right:auto;
   margin-left:auto;
   color:#666666;
   text-align: center;
   font-size: small;
   vertical-align: middle;
   background-color: #CCCCCC;
   padding:2px 0;
}

[freelance84]

Thanks, taking the height off has worked. Bit wierd that