Html, CSS vertical align a menu - html

Question

I'm trying to make a menu, but I'm having trouble centering the text to the middle.
<div id="menucontainer">
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li> |
<li>#Html.ActionLink("About", "About", "Home")</li> |
<li>#Html.ActionLink("Projects", "Projects", "Home")</li> |
<li>#Html.ActionLink("Forum", "Forum", "Home")</li>
</ul>
</div>
#menu
{
background-image: url("../Content/img/bg-menu.png");
height:50px;
padding-left:30px;
padding-right:25px;
text-align:center;
border-radius:20px;
background-repeat:repeat;
display:block;
list-style: none;
margin-left:55%;
position:absolute;
color:#aa4dc6;
}
#menu li
{
display:inline;
padding:5px 10px 9px 10px;
}
#menu a
{
text-decoration:none;
color:#606060;
text-decoration:none;
text-transform:capitalize;
font-size:19px;
font-weight:bold;
font-family: 'Open Sans', sans-serif;
}

Answer 1

give it the same line-height as the element's height and the text should be properly aligned

Answer 2

There are a few solutions to this problem.
Here's a jsFiddle that demonstrates all of the solutions below.
First, you can try setting the display property to table-cell for the list items in the menu, and then you can use vertical-align:middle to center the text.
The solution would probably work well, because instead of floating the list items, you can use CSS to make them behave like table cells.
ul#menu {
display: table-row;
}
ul#menu li {
display: table-cell;
vertical-align: middle;
}
Second, you can set the line-height property to the height of the list item. Be careful with this one though, because if the text wraps it will break the layout:
ul#menu li {
height: 30px;
line-height: 30px;
}
Lastly, instead of setting a fixed height, you can use padding to set the height of the list items. Assuming you use the same padding for the top and bottom, the text should be aligned in the center:
ul#menu li {
padding: 15px 5px 15px 5px;
}