How to vertically center Wordpress navigation bar - php

Question

I have a navigation bar at following wordpress site: http://tarjom.ir/demo/pwp
I have two major issues with this navigation bar:
1- I can't vertically align it at the middle.
2- There is a div wrapper as the parent of the <ul> tag that I can't remove it. However I have already set 'container' => '', but it does not work.
<!-- Navigation bar-->
<div id='wp_nav_section' class='grid-100 black-gray-bg font-roya' style='min-height: 100px; display: block;height:100%;'>
<?php wp_nav_menu(array("container" => 'nav')); ?>
</div>
<!-- End of navigation bar. -->
Here is my wordpress navigation code:
Here is all my CSS related to the wordpress navigation:
.menu
{
height: 65px;
min-height: 60px;
padding: 0px;
text-align: right;
background-color: #111;
margin-bottom: 10px;
}
.menu ul
{
direction: rtl;
width: 70%;
margin-right: auto;
margin-left: auto;
overflow: hidden;
height: auto;
padding-top: 0px;
}
.menu li
{
padding: 0px 0px;
display: inline-block;
}
.menu li a
{
color: white;
text-decoration: none;
display: block ;
height: 45px;
background-color: black;
border-right: 2px #333 solid;
padding: 16px 7% 3px 3%;
box-sizing: border-box;
width: 100px;
margin: 0px 0px;
font-size: 110%;
}
.menu li a:hover
{
background-color: #333;
border-right: 2px #F90 solid;
}
I need the <ul> tag to be centered vertically in the <div> wrapper.
Thanks in advanced.

Answer 1

Remove height from .menu{} class. this will solved your vertical align issue.

Answer 2

I would try this, if you haven't already:
<?php wp_nav_menu(
array (
'container' =>false,
'items_wrap' => '%3$s', //"%3$s" is the li list itself. See below for the default value.
) ); ?>
The default values for these two parameters are:
'container' => 'div',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
So I would make sure to define those the way you want them in your call to wp_nav_menu().
You can read more info on my post at http://icode4you.net/wordpress-tricks-customizing-the-output-of-wp_nav_menu/
To center the UL within a div, I would use this code:
<style>
div {
text-align:center;
}
ul {
display:inline-block;
}
</style>
Let me know if you would like any more information or help :)