Vertical spry menu bar text won't center vertically

Question

I know I have gotten past this this before a long time ago but I can't seem to recall what I did. The text in the the buttons for the vertical spry menu bar can be aligned horizontally with text-align but I've tried to vertically align and have gotten nothing using the vertical align. I'm wondering if there is a property I need to define first or if I'm just being an idiot and missing it entirely. It is an update for www.eauclairetowing.com using a vertical spry menu bar not unlike the one currently on there.

I see your answers. I am currently at work but will try them on my lunch break. This site is going to be my new found love :D

Answer 1

Use padding-top like you've done in the current site:

ul.MenuBarHorizontal a {
  padding-top:0.5em
}

Answer 2

If your menu items are in single lines only (no line breaks), give them a line-height that is equal to the height of the menu item.

Example:

.menu li a { 
  height: 100px;
  line-height: 100px;
}

If it has more then one line per menu item, give it the display of table-cell and give it a vertical-align: middle

.menu li a {
  display: table-cell;
  vertical-align: middle;
}