1

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

Ryan M Brindle
  • 13
  • 3

2 Answers2

1

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;
}
chdltest
  • 853
  • 2
  • 6
  • 18
  • Both of your answers worked I took away the 50px height variable and set the padding to 20px 20px and set line height to 10px tyvm, I had to choose which one to make the answer and prabu seems more in need of the reputation support so I hope you arn't dissapointed if I had the rep I would at least like your bigal but I sincerely thank both of you :D – Ryan M Brindle Nov 03 '14 at 19:32
  • I'm so disappointed that I'm going to eat a banana and do nothing else now. But at least your problem was solved. – chdltest Nov 03 '14 at 19:39
0

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

ul.MenuBarHorizontal a {
  padding-top:0.5em
}
Prabu Raja
  • 239
  • 1
  • 8
  • Thanks Ryan, I loved the extra credits, dying to get to 50 :D. And, I surely like chdltest's answer too, of course it's better than mine. Upvoting!! – Prabu Raja Nov 04 '14 at 05:27