title: CSS menu - center align items and middle align vertically
body: <p>I have a CSS menu with sub menus, i am trying to get it to display the menu items in the centre of the menu.</p>
  
  <p>i tried adding <code>text-align:center</code> to <code>#menu-product-categories &gt; li {</code> but that didn't work.</p>
  
  <p>I have also added <code>margin-top:10px;</code> to <code>#menu-product-categories &gt; li {</code> to put the text of the menu items in the middle (vertically) of the menu but when hovering on the items, the hover background does not display the full height.</p>
  
  <p>I have created a fiddle here of my menu: <a href="https://jsfiddle.net/j0x39owh/1/" rel="nofollow">https://jsfiddle.net/j0x39owh/1/</a></p>