Fixed Height Dynamic Text Buttons
I've been researching this for about 4 hours now and I'm simply amazed that it isn't being discussed all over the web, but perhaps I'm missing something obvious.
I'm trying to replicate the way a <button> tag works. Create a button with a <button> tag, set a fixed height (say 40px) and no matter what text you put in that button, it will be perfectly centered (horizontally and vertically). Multiple lines wrap and the browser readjusts the padding automatically to fix the text and keep it centered.
Now, the horizontal alignment is obviously trivial. It's the vertical alignment that seems to be impossible. There are tons of solutions out there when you search for vertical alignment, but none of them seem to apply to this situation where you have a fixed height container and variable line content.
If it's still not clear, assume I have a side navigation bar with two buttons:
The first button is on two lines, the second is on one, but I want a uniform sized button with the text centered vertically. The easy solution of course would be to just create pngs for each link, but the links are dynamic (pulled from a database). What is driving me crazy is if the <button> tag can do it, why can't I replicate it with css?
p.s. I did come up with a solution where I wrapped a button tag in a anchor tag, but I couldn't get the link to work anymore in IE for some reasons.