Specifying vertical text height - html

Question

I am building a horizontal menu using unordered lists. 4 items are links and then there's an image in the center. Currently the links are centered on the middle of the image, but the I would rather the text vertically align lower than middle. The image is 140px tall and I would like the text to be at 50px. I've tried playing with vertical-align and line-height, but no joy. Padding doesn't work. I'm sure this is obvious and I'm just missing it. Any help would be appreciated.
Code:
.menu {
text-align: center;
}
.menu ul {
display: inline-table;
}
.menu ul li {
display: inline;
line-height: 0px;
}
.menu .link {
padding: 15px;
}
.menu a {
text-decoration: none;
font-size: 17px;
font-weight: 400;
color: #131313;
}
.menu a:hover {
color: #330000;
}
<div class="container">
<div class="row menu">
<ul>
<li class="link">MENU
</li>
<li class="link">ABOUT
</li>
<li class="link">
<a href="index.html">
<img class="center logo" src="https://placehold.it/140x140" />
</a>
</li>
<li class="link">BLOG
</li>
<li class="link">CONTACT
</li>
</ul>
</div>
</div>
Using bootstrap 3.3.6 as well.

Answer 1

You mean like this fiddle?
.menu { text-align:center; }
.menu ul { display:inline-table;}
.menu ul li {display:inline; line-height:0px;}
.menu .link {
padding: 15px;
}
img{
width: auto;
height: 140px;
vertical-align: -50px;
}
.menu a {
text-decoration: none;
font-size: 17px;
font-weight: 400;
color: #131313;
}
.menu a:hover {
color: #330000;
}
<div class="container">
<div class="row menu">
<ul>
<li class="link">MENU</li>
<li class="link">ABOUT</li>
<li class="link"><img class="center logo" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300"/></li>
<li class="link">BLOG</li>
<li class="link">CONTACT</li>
</ul>
</div>

Answer 2

Give the text LI's a different class, and then apply vertical-align: 50px.
.menu {
text-align: center;
}
.menu ul {
display: inline-table;
}
.menu ul li {
display: inline;
line-height: 0px;
}
.menu .link {
padding: 15px;
}
.menu .link.align {
vertical-align: 50px;
}
.menu a {
text-decoration: none;
font-size: 17px;
font-weight: 400;
color: #131313;
}
.menu a:hover {
color: #330000;
}
<div class="container">
<div class="row menu">
<ul>
<li class="link align">MENU
</li>
<li class="link align">ABOUT
</li>
<li class="link">
<a href="index.html">
<img class="center logo" src="https://placehold.it/140x140" />
</a>
</li>
<li class="link align">BLOG
</li>
<li class="link align">CONTACT
</li>
</ul>
</div>
</div>

Answer 3

Not sure if you want the text to be vertical-align: top or vertical-align: middle but you can adjust it as you please with this codepen!
I made the li's inline-block which enables them to be adjusted by the vertical-align property and still be horizontal across your navigation.
I gave the background some color so that the stock image wouldn't blend in as much and you'd be able to see the alignment.
HTML:
<div class="container">
<div class="row menu">
<ul>
<li class="link">MENU</li>
<li class="link">ABOUT</li>
<li class="link"><img class="center logo" src="http://lorempixel.com/140/200/"/></li>
<li class="link">BLOG</li>
<li class="link">CONTACT</li>
</ul>
</div>
CSS:
body {
background: #BBB;
}
.menu {
text-align:center;
}
.menu ul {
display:inline-table;
}
.menu ul li {
display: inline-block;
vertical-align: middle;
}
.menu .link {
padding: 1em;
}
.menu a {
text-decoration: none;
font-size: 3.125em;
color: #131313;
}
.menu a:hover {
color: #330000;
}