Html, CSS vertical align a menu

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