how to set my horizontal table to the middle of the nav?

Question

<style type="text/css">
*{
padding:0; margin:0;
}
nav{
width:100%;
height: 80px;
background-color:lightgrey;
text-align:center;
display:inline-table;
vertical-align:middle;
word-spacing:20px;
}
li{display:inline;}
.a1{display:table-cell;}
</style>

<nav>
<div class="a1">
<ul>
<li> ghb </li>
<li> jhfgh </li>
<li> jfui </li>
<li> jghjj </li>
<li> ughj </li>
</ul>
</div>
</nav>

Answer 1

<style type="text/css">
nav li{
display: inline-block;
border: 1px solid #333;
}
nav ul{
text-align:center;
padding:0
}

</style>

<nav>
<ul>
<li> ghb </li>
<li> jhfgh </li>
<li> jfui </li>
<li> jghjj </li>
<li> ughj </li>
</ul>
</nav>

Answer 2

Do you mean something like this?
https://jsfiddle.net/q7uphx52/

Answer 3

@Andriy Heptinh Tyvm bro, now I know I shoud add a "vertical align in the div inside the nav. This is the right way to do it or there's a other way more simple to do a vertical nav bar like that, for example?

Answer 4

Well, I made another way of doing this. It's more complicated, but I prefer to use this way. I've used CSS3 for that. Try to look at it (I made some comments in CSS part):
https://jsfiddle.net/q7uphx52/1/

I'm not sure what do you need it for. Is it horizontal menu?