Wyrównywanie w pionie tekstu w pasku nawigacyjnym

Question

Próbuję użyć <span>, aby przenieść tekst na pasku nawigacyjnym. Mój pasek nawigacji to <ul>, a wszystkie elementy są wyrównane do górnej krawędzi paska nawigacyjnego i chcę, aby był wyśrodkowany w pionie. Jak widać w JSFiddle, używam właściwości a: hover w CSS, aby zmienić tło i kolor tekstu, gdy jest on przeskakiwany. Kiedy zastosuję rozpiętość tylko do tekstu, cała część aktywująca zostanie również przeniesiona. Sprawdź, czy rozumiesz, co mam na myśli.

My JSFiddle jest tutaj:

http://jsfiddle.net/G8CJ7/

Zasadniczo Chcę tylko tekst pionowo w prosty i zwięzły sposób. Pierwotnie używałem tagów i ustalałem na nich margines, ale chcę w tym celu unikać tagów nagłówka, by poprawić SEO. Dzięki.

Answer 1

Aktualizacja to kilka lat później, ale zawsze istnieje możliwość korzystania z:

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

z vertical-align: middle; w celu wyśrodkowania przedmiotów. Wolę takie podejście w dzisiejszych czasach, ponieważ można zastosować reguły responsywne do stylu wyświetlania (na przykład, zmienić je, aby wyświetlać: blokować i wyświetlać: blok wbudowany itp., Jeśli musisz go zaktualizować dla innych rozmiarów ekranu.) Oto skrzypce:

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

Answer 2

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

Dodany line-height: 40px aby wyśrodkować tekst w pionie. IE7 będzie miał z tym problemy, ponieważ nie jest w pełni obsługiwany, więc warunkowy arkusz stylów z dopełnieniem na li rozwiązuje go.

Answer 3

Dodawanie wysokość wiersza działa, można także dodać dopełnienie do góry:

.class { padding-top: 10px; } 

Regulacja dopełnienie do środka.