Выравнивание текста по вертикали в Navbar

Question

Я пытаюсь использовать <span> для перемещения текста в моей панели навигации.Моя навигационная панель - <ul>, и все элементы - <li> с, но текст выровнен по верху навигационной панели, и я хочу, чтобы он был вертикально центрирован.Как вы можете видеть в JSFiddle, я использую свойство a: hover в CSS для изменения фона и цвета текста, когда он находится над ним.Когда я применяю span только к тексту, весь перемещаемый раздел тоже перемещается.Посмотрите, можете ли вы понять, что я имею в виду.

Мой JSFiddle находится здесь:

http://jsfiddle.net/G8CJ7/

По сути, я просто хочу, чтобы текст был выровнен по вертикали простымкраткий путь.Первоначально я использовал теги '' и устанавливал на них маржу, но я хочу избегать использования тегов заголовков для этой цели для улучшения SEO.Спасибо.

Answer 1

Добавление высоты строки работает, вы также можете добавить отступы вверху:

.class { padding-top: 10px; }

Отрегулируйте отступ по центру.

Answer 2

http://jsfiddle.net/G8CJ7/1/

Добавлена ​​высота строки: 40 пикселей для центрирования текста по вертикали.IE7 будет иметь проблемы с этим, так как он не полностью поддерживается, поэтому его решит условная таблица стилей с верхним отступом в li.

Answer 3

Обновление через пару лет, но всегда есть возможность использовать:

display:table;
display:table-row;
display:table-cell;

с вертикальным выравниванием: посередине; чтобы центрировать предметы. Я предпочитаю такой подход в наши дни, потому что вы можете применять адаптивные правила к стилю отображения (например, изменить его на display: block и display: inline-block и т. Д., Если вам нужно обновить его для других размеров экрана. Вот скрипка:

http://jsfiddle.net/G8CJ7/68/