Testo di allineamento in verticale in Navbar

Question

Sto cercando di usare <span> Per spostare un po 'di testo nella mia barra di navigazione. La mia barra navigata è un <ul> E gli elementi sono tutti <li>s ma il testo è allineato alla parte superiore della barra navic e voglio che sia centrato verticalmente. Come puoi vedere in JSFIDLE, sto usando una proprietà A: Hover in CSS per cambiare lo sfondo e il colore del testo quando viene litigato. Quando applico l'intervallo solo al testo, anche l'intera sezione in bilico viene spostata. Vedi se riesci a capire cosa intendo.

Il mio jsfiddle è qui:

http://jsfiddle.net/g8cj7/

Fondamentalmente voglio solo il testo allineato verticalmente in un modo semplice e conciso. Inizialmente stavo usando i tag '' e mettevo un margine su di essi, ma voglio evitare di usare i tag di intestazione a questo scopo per migliorare la SEO. Grazie.

Answer 1

Aggiornarlo un paio di anni dopo, ma c'è sempre la possibilità di utilizzare:

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

con allineamento verticale: medio; Per centrare gli articoli. Preferisco questo approccio in questi giorni perché è possibile applicare regole reattive allo stile di visualizzazione (ad esempio modificarlo in visualizzazione: bloccare e visualizzare: blocco inline ecc. Se è necessario aggiornarlo per altre dimensioni dello schermo. Ecco un violino:

http://jsfiddle.net/g8cj7/68/

Answer 2

http://jsfiddle.net/g8cj7/1/

Aggiunta riga-riga: 40px per centrare il testo in verticale. IE7 avrà problemi con questo in quanto non è pienamente supportato, quindi un foglio di stile condizionale con un'imbottitura su Li, risolverà.

Answer 3

Aggiunta di altezza della linea funziona, è anche possibile aggiungere imbottitura in alto:

.class { padding-top: 10px; }

Regolare l'imbottitura al centro.