Bootstrap 3 + LESS - How can I get a nav item centered vertically - html

Question

I'm working at a justified navigation bar. Some of the menu items are in two lines some have only one line. How can I manage it, that all menu items are vertically centered?
My HTML
<nav>
<div role="navigation" class="col-lg-12 hidden-xs hidden-sm hidden-md navi">
<ul class="nav nav-justified">
<li class="active">
<a href="#" >
<span class="glyphicon glyphicon-home active"></span>
</a>
</li>
<li>
<a href="rooms_prices.html" >
Rooms & Prices
</a>
</li>
<li>
<a href="location.html" >
Location
</a>
</li>
...
<li>
<a href="specials.html">
Specials & Events
</a>
</li>
<li>
<a href="contact.html">
Contact
</a>
</li>
</ul>
</div>
</nav>
My LESS:
nav {
margin: 0;
padding: 0;
}
.nav-justified {
width: 100%;
hight: 60px;
> li {
float: none;
alignment-adjust: middle;
> a {
display: block;
text-align: center;
}
}
THX for your hints!
EDIT:
Sorry I've messed up the code. I've left the -Tag out because there ave mor div sections with different navigation bars for several display sizes.

Answer 1

You have a ton of problems here, your markup is incorrect and you're trying to apply styles to elements that don't exist.
You're targeting nav, you have no nav element so you should be using .nav to target the class you've applied the div parent.
<div role="navigation"col-lg-12 hidden-xs hidden-sm hidden-md navi">
This is not valid HTML, it should be:
<div role="navigation" class="col-lg-12 hidden-xs hidden-sm hidden-md navi">
If you have nav items where the text drops down onto two lines considering your menu is justified I'd suggest that your text is too long and you should instead use some CSS3 truncation in conjunction with storing the full name of the menu item in its title attribute so it shows on hover - stretching out your other menu items is going to look strange and will require some hacking to achieve.
.nav-justified a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
The issue you will have trying to vertically center a justified nav is that usually you would make the list items display: inline-block and vertically center them that way, but as justified items they are display: block by default. Additionally Bootstrap applies the border styles directly to the anchors, not the list items, so even if you vertically centered them you'd have borders out of alignment.