How to vertically align a piece of text in a button

[Makaveli2007]

I have a vertical menue on the left side of my website. It has four buttons. The first 3 buttons are equal in size, however the fourth button is only half their size, because the text in it is shorter.

The vertical menue is placed in a div-container (no tables or anything).

I've started using a fixed height for each button, however the fourth button looks strange, because the text is at the top (there are 2 rows(lines?exp?) of space, but only the upper row is used, whereas in the other buttons both rows are needed.

I would like to place the text in the fourth button in the middle of it (vertically). However vertical-align:middle; doesn't seem to work.

Any ideas?

P.S.: the only other solution I can think of is to think up a longer text for the fourth button or to use spaces in the html-code. However I'd like to make my code remain clean and separate layout and html.

[Stomme_poes]

This answer also goes to terrybarnes, the thread above has almost the same question.

I suck at vertical alignment of text in relation to things like images, but in buttons, I wrestled with padding until I learned the secret of line-height. It almost always does what you want every time. Watch out for IE6, it thinks line-height means "height".

Give a class to your short button, so you can set a different line-height. Look at the height of the button. How many pixels is it? Set your font to be what you want (but this works best if it's about half of the total button height) and set your line-height equal to the button height. Your text will try to sit its baseline in the middle of the line-height.
Leave the other buttons if they look good-- setting a large line-height will give too much space between two adjacent lines of text.

I'm assuming the button is a menu list item... so I will use one in my example:

<ul id="menu">
 <li><a href="#">First Button really long has two lines and stuff and more stuff</a></li>
 <li><a href="#">Second Button really long has two lines and stuff and more stuff</a></li>
 <li><a href="#">Third Button really long has two lines and stuff and more stuff</a></li>
 <li class="short"><a href="#">Fourth Button</a></li>
</ul>
CSS
li {
 display block;
 height you want;
 other stuff;
}
menu stuff you already have...
#menu li.short {
 height: height you want;
 line-height: equal;
 font-size: whatever works best;
etc
}

If you're having your li's kept inline, then you can do this for the <a>nchors instead. Put the class on the a instead, set to display block so you can set a height, then set a line-height.

Actually, you could prolly get away with just setting a line-height equal to whatever the height is by default without having to explicitly set a height on the container... but upon text-enlargement, the text may get moved out of center.