css vertical and horizontal alignment issues - html

Question

I'd like to align my menu items and logo-picture both horizontally and vertically in the red DIV. How could I achieve that? I've tried to set margin left and right to auto as well as vertical-align to center, but that didn't work. Thanks for your help
See: http://jsfiddle.net/gm2wzL6z/
HTML:
<div id="nav-container">
<nav>
<ul id="navlist">
<li id="active">Item one
</li>
<li>Item two
</li>
<li>Item three
</li>
<li>
<img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg">
</li>
<li>Item four
</li>
<li>Item five
</li>
</ul>
</nav>
</div>
CSS:
#nav-container {
height: 300px;
background: red;
}
#navlist li {
display: inline;
list-style-type: none;
padding-right: 20px;
}

Answer 1

#nav-container {
height: 300px;
background: red;
}
#navlist li {
display: inline-block; /* this for personal preference :) */
vertical-align: middle; /* this for alignment*/
list-style-type: none;
padding-right: 20px;
}
<div id="nav-container">
<nav>
<ul id="navlist">
<li id="active">Item one
</li>
<li>Item two
</li>
<li>Item three
</li>
<li>
<img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg">
</li>
<li>Item four
</li>
<li>Item five
</li>
</ul>
</nav>
</div>

Answer 2

Use display:table/table-cell with vertical-align:
#nav-container {
height: 300px;
background: red;
display:table;
width:100%;
}
#nav-container nav{
display: table-cell;
height: 300px;
vertical-align: middle;
text-align:center;
}
#nav-container nav li{
display:inline-block;
vertical-align: middle;
}
<div id="nav-container">
<nav>
<ul id="navlist">
<li id="active">Item one
</li>
<li>Item two
</li>
<li>Item three
</li>
<li>
<img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg">
</li>
<li>Item four
</li>
<li>Item five
</li>
</ul>
</nav>
</div>
JSFiddle

Answer 3

In order for this to work you need 3 things.
1)A main div to act as the container
2)A div inside the container with the vertical aligh and a width of 100% of your container as you have to do relative positioning in order to do vertical align.
3)A final container to do your margin-left, margin-right auto. It has to have a set width thats smaller than the previous two containers
4)All your content sits inside the horizontal div
5)Dont set the height of the main container as this will limit the vertical align from going beyond that.
#nav-container {
background: red;
width: 100%
}
#vertical-align {
position: relative;
top: 50%;
width:100%
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#horizontal-align{
width: 100%
max-width: 700px;
margin-left: auto;
margin-right: auto;
}