title: Html, CSS vertical align a menu
body: <p>I'm trying to make a menu, but I'm having trouble centering the text to the middle.</p>
  
  <pre><code>&lt;div id="menucontainer"&gt;
              &lt;ul id="menu"&gt;
                  &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt; | 
                  &lt;li&gt;@Html.ActionLink("About", "About", "Home")&lt;/li&gt; | 
                  &lt;li&gt;@Html.ActionLink("Projects", "Projects", "Home")&lt;/li&gt; | 
                  &lt;li&gt;@Html.ActionLink("Forum", "Forum", "Home")&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
  
  #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;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Xt3hF.png" alt="enter image description here"></p>