Navegação horizontal <ul> - como alinhar verticalmente os conteúdos de <li> - html, css, alinhamento vertical, alinhamento

Eu tenho uma horizontal <ul> estilizado com CSS. Funciona legal, rolloevers tudo, porém, a lista tem uma altura de 50px e preciso posicionar os nos links no meio vertical. Por alguma razão, eu não consigo descobrir como fazer isso ...

O código relevante está aqui: http://jsfiddle.net/XPFMB/

Como fazer os links "ssss" irem para o meio da barra cinza?

Respostas:

Adicionar line-height: 50px; para o seu CSS para .nav ul li a

Adicionar altura da linha ao li"s CSS:

.nav li {
margin: 0px;
float: left;
line-height: 50px;
}

Demo JS Fiddle.

este vai causar problemas se o texto for longo o suficiente para rodar em uma segunda linha; no entanto, para explicar que você poderia usar min-width (ao invés de width) no a elementos e, em seguida, adicione white-space: nowrap tanto para o ul e a li:

.nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
vertical-align: middle;
white-space: nowrap;
}
.nav li {
margin: 0px;
float: left;
line-height: 50px;
white-space: nowrap;
}

Demo JS Fiddle.

Ainda não é perfeito, mas reduz a probabilidade do layout quebrar usando o texto do link alguns caracteres por muito tempo.