Vertical center UL menu and IMG in a #menu div - css

Question

Sorry for asking stuff that's already been explained a lot but none of the solutions that I saw so far on StackOverflow is actually working for me(table-cell, text-align, vertical-align...nothing).
Here's the deal: all of my code is inside a #box div which is the one dealing with the centering and containing all the elements. The first div after this is #menu and it's like this:
<div id="menu">
<img src="img/logo.jpg" alt="logo">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
Nothing special actually, it's pretty simple. My CSS looks like this:
#menu {
background-color: #babadc;
height: 100px;
margin: 0 auto;
width: 1280px; }
#menu img {
float: left; }
#menu ul {
float: right;
list-style: none;
line-height: normal; }
#menu li {
display: table-cell;
padding-left: 20px;
vertical-align: middle; }
Be ware that I'm using a basic CSS Reset to avoid most problems when I'll go test cross-browsing.
The problem here is no matter which of the solutions I try from StackOverflow, only the IMG or the UL vertically centers or they're slightly non-aligned.
What I'm asking for is: what's the BEST WAY today to do such a simple task with html/css only(the img size won't change) and have a logo image and a menu on its right perfectly center on the vertical space in a div with known width and height?
I obviously cleaned cache, refreshed, did everything so I'm sure changes are taking effect...I'm just missing something really stupid probably but I really can't center both.
To better show what I want I made this, this should be really a basic menu setup yet something ain't working as expected. Here's my desired outcome, just remember I didn't write any rule to move img and #menu ul from the left/right borders because, obviously, right now they're on the side borders...I'll give margins later.

Answer 1

perhaps this is what you want? Fiddle
you just need to make the li to inline-block, add line-height to the div #menu with the same value as height, and add style vertical-align: middle to the img, here's the full CSS needed with the same HTML as yours
#menu {
background-color: #babadc;
height: 100px;
line-height: 100px;
margin: 0 auto;
width: 1280px;
}
#menu img {
height: 50px;
vertical-align: middle;
}
#menu ul {
margin: 0;
float: right;
list-style: none;
}
#menu li {
display: inline-block;
padding-left: 20px;
/*vertical-align: middle; this is not needed because already declare line-height in parent*/
}
note that the vertical-align: middle for image work because it's following the other inline or inline-block element, and the inline or inline-block element is in the middle because of the line-height that's set on the #menu. And you also need to make sure that the container width is always greater then the total of image width and ul width for this to work

Answer 2

If the height is known and fixed, I would suggest
ensure that there is no top/bottom padding/margins on ul, li and a. Set line-height to 1 on a
manually set top margins for img and ul based on the height of nav and height of images. ul height will be your font-size once all extra padding is removed. (margin-top = nav height minus half of image/ul height)
See this fiddle: http://jsfiddle.net/no5wo77a/1/

Answer 3

Maybe you can work from this?
Fiddle
HTML
<img src="http://www.thenextbestweb.com/wp-content/uploads/2014/06/shell.jpg" alt="logo" height="80%" width="auto">
CSS
body {
outline: 0;
margin:0;
}
#menu {
background-color: #babadc;
height: 100px;
margin: 0 auto;
width: 100%;
position: relative;
}
#menu img {
float: left;
top: 10%;
position: absolute;
}
#menu ul {
float: right;
list-style: none;
line-height: normal;
background-color: #FF0000;
height: 20px;
margin-top: 40px;}
#menu li {
display: table-cell;
padding-left: 20px;
}
Just look at the fiddle....