Горизонтальная <ul>навигация - как выровнять по вертикали содержимое <li>

Question

У меня есть горизонтальная <ul> в стиле CSS. Работает хорошо, все переворачивается, однако список имеет высоту 50 пикселей, и мне нужно расположить ссылки в вертикальной середине. По какой-то причине я не могу понять, как это сделать ...

Соответствующий код здесь: http://jsfiddle.net/XPFMB/

Как заставить ссылки "ssss" перейти на середину серой полосы?

Answer 1

Добавьте line-height: 50px; в свой CSS для .nav ul li a

Answer 2

Добавьте высоту строки к CSS li:

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

JS Fiddle demo .

Это вызовет причинойпроблемы, если ваш текст достаточно длинный для запуска до второй строки;однако, чтобы учесть это, вы могли бы использовать min-width (вместо width) на элементах a, а затем добавить white-space: nowrap к обоим ul и 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;
}

JS Fiddle demo .

Это все еще не идеально;но это уменьшает вероятность разрыва макета, если использовать текст ссылки на несколько символов длиннее.