HTML/CSS - Centering ul in block-element vertically

NullerBR

New Member
The HTML\[code\]<nav class="cf"> <div class="logo"> <a href="http://stackoverflow.com/questions/14491619/#">Logo</a> </div> <ul> <li><a href="http://stackoverflow.com/questions/14491619/#">Link 1</a></li> <li><a href="http://stackoverflow.com/questions/14491619/#">Link 2</a></li> <li><a href="http://stackoverflow.com/questions/14491619/#">Link 3</a></li> </ul></nav>\[/code\]THE CSS\[code\].cf:before, .cf:after { content: " "; display: table; }.cf:after { clear: both; }ul { margin: 0; padding: 0; list-style: none; background: red;}nav { background: grey; text-align: center;}nav ul { font-size: 0px; text-align: right;}nav li { font-size: 14px; display: inline;}nav li a { display: inline-block; width: auto; background: green;}.logo { font-size: 33px; background: orange; float: left;}\[/code\]The Fiddle
http://jsfiddle.net/M9Sdd/The Question
How do I center the \[code\]ul\[/code\] (red background) vertically inside the \[code\]nav\[/code\] (grey background)?
 
Back
Top