Bootstrap nav-bar: how to vertical align wrapped-/multiple line text - css

Question

I'm trying to vertical align text on a bootstrap navbar item. The text is wrapped on two lines. Its no problem to align a single line text but it gets much more difficult to vertical-align when its on two lines. I cant use line-height are there any alternatives? I havent seen any good solutions on wrapped text, many solutions doesn't take into account multiple lines of text.
HTML code
<ul class="nav navbar-nav">
<li class="dropdown">
SHORT SINGLE LINE
</li>
<li class="dropdown">
VERY LONG TEXT, WRAPPED TEXT
</li>
</ul>
CSS code
.navbar-nav > li > a
{
height: 58px;
line-height: 19px;
padding-top: 10px;
text-align: center;
}

Answer 1

You can use display:table-cell and display:table on the parent div instead of float:left; on the lis.
I am sure bootstrap nav elements are floated. Check this code:
.navbar-nav > li > a
{
height: 58px;
line-height: 19px;
text-align: center;
padding: 0 5px;
}
.navbar-nav{
display: table;
background: #f5f5f5;
padding: 0;
margin: 0;
}
.navbar-nav > li{
display: table-cell;
vertical-align: middle;
padding: 10px;
float: none !important;
text-align: center;
border-left: 2px solid #fff;
}
.navbar-nav > li:first-child{border: 0;}
<ul class="nav navbar-nav">
<li class="dropdown">
SHORT SINGLE
</li>
<li class="dropdown">
VERY LONG TEXT, <br> done WRAPPED TEXT
</li>
</ul>

Answer 2

this is all what you need :
.navbar-nav > li > a
{
text-align: center;
display: inline-block;
vertical-align: middle;
}
and you have to remove these two :
height: 58px;
line-height: 19px;
LIVE DEMO

Answer 3

.navbar-nav > li > a
{
height: 58px;
line-height: 19px;
padding-top: 10px;
text-align: center;
}
you just remove that part, its not neccesary, the text stays vertically centered on its own