The words on my buttons won't center correctly.......

[mariko]

I have some buttons and I want words on them. But the tops of the words seem as though they are glued to the top of my buttons.

So, here's what I have:
HTML

<ul id="navbutton">
<li style="margin-top:5px"><a href="another.html">Name of my button</a></li>
<li style="margin-top:5px"><a href="another.html">Hello</a></li>
</ul>

and CSS (external)

#navbutton a {   
display: block;   
background:  url(button.gif); 
text-decoration: none;
text-align: center;
font: 0.7em Tahoma, sans-serif;
font-size: 16px;
font-padding:5px 5px 5px 10px;
font-weight: bold;
float: center;
width: 150px;
height: 45px;
}

#navbutton a:hover {   
background:  url(buttonn.gif);   
width: 150px;   
height: 45px;   
}

I added an attachment so you can see what it looks like.

Thanks all!

[mariko]

By the way, colors and fonts and things like that are still very much in the rough. I will change those.

[JKing]

Use padding not font-padding. Center is not a valid value for float.

[mariko]

I took off the font of the "font-padding" and it took the image of my button and started to repeat the image. Basically, it affected the image, not the words. Sorry about the center float. I've been trying everything I could think of and forgot to delete it.

[johny10151981]

When you use text-align it only align the text horizontally. to make the button text keep in the middle of the box you need to use valign too. Set valign to middle.

[mariko]

Where would I put the valign? Sorry, I'm a newb.

[johny10151981]

Before I gave you the answer I looked on google a bit. And I discover that valign or vertical-Align dont work with Anchor(<a></a>).

So I am changing my suggestion. Add another line in your

[B]#navbutton a {
...

line-height: 45px;
}[/B]

line height defines the height of your each line. Make both line-height and link height same. If you set both line-height and link height same, your line will go to center automatically. you wont need valign or vertical-align.

Line height actually define the height of a single line.

I have tired this with both Firefox and Internet Explorer. It works fine.

[mariko]

It worked! Thank you so much!