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

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

мой JSFiddle здесь:

http://jsfiddle.net/G8CJ7/

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

6
css html navbar

3 ответов

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

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

3

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

.class { padding-top: 10px; }

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

3

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

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

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

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

0