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

Question

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

Мои JSFiddle здесь:

http://jsfiddle.net/G8CJ7/

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

Answer 1

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

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

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

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

Answer 2

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

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

Answer 3

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

.class { padding-top: 10px; } 

Отрегулируйте прокладку к центру.