Centriranje elementov menuja

Torej želim imeti tak menu:
http://i.imgur.com/vFpxltS.jpg?1

Vendat pa ne vem kako se pozicionira elemente da jih prikaže na sredino, sedaj imam vse elemente li>a na zgornjem robu. Primer:

http://jsfiddle.net/t2K2L/

Probaval sem že z margin auto in paddingom, pa ni delovalo. Kakšna ideja?

Lepo prosim za pomoč:)

Vertikalno centriranje ni možen s CSS, razen če uporabiš:
a) tabele (ni semantično)
b) javascript (ne deluje kjer ni podpore za JS, vcasih deluje prepocasi, se zna zakomplicirati ob vzdrzevanju strani in reponsive)

Svetujem ti, da lepo narediš padding toliko kot ga potrebuješ in to na A elementu, da bo opcija normalno klikabilna.

http://jsfiddle.net/t2K2L/5/

Tudi z display: box se da vertikalno centrirat.

@msjr: Kako pa tvoj primer deluje, če je ena izmed opcij v navigaciji v dveh vrsticah?

@Matek: z display:box deluje, vendar moraš spet uporabiti JS za starejše IE (github.com/doctyper/flexie)

@Jerry000: responsive slike zaenkrat še niso podprte v vseh (mobilnih) brskalnikih, niti ne obstaja neka standardizirana rešitev za ta problem. Da se pa storiti nekaj malega v tej smeri.
Vir: Choosing a responsive image solution

neoserv je 6. sep 2013 ob 10:49 izjavil:

@msjr: Kako pa tvoj primer deluje, če je ena izmed opcij v navigaciji v dveh vrsticah?

Če pričakuješ opcijo v menuju v dveh vrsticah lahko dodaš na a tag display: table-cell, če to ne deluje daš še v div ali kaj podobnega. Rešitev je nešteto, samo pogledat je treba.

Evo, poglej si example: http://matthewjamestaylor.com/blog/cent...

Res je, rešitev je nešteto, ampak v 10 letih nisem uporabil table-cell, ker so se vedno pojavili problemi, ki je bilo potrebno zadevo podpreti v IE7+.

@Jerry: max-width ne pomeni, da je to podprto. Eno je resizanje slike, drugo je pa serviranje primerne slike specifični napravi.

kako se ve da je stran pravilno narejena za mobilne telefone? Naprimer kot sem dejal, naredil sem stran širine 768px kot ima Nexus 4 širino. Potem sem dodal meta značko:

<meta name="viewport" content="width=device-width, initial-scale=1">

Ampak ko stran odprem na mobitelu, je stran večja...ne razumem. A ni tko da če piše da ma 768 širine, in če naredim v takšni velikosti, naj nebi bilo potem horizontalnega drsnika? Kaj je keč? Če pa odzumiram pa itq pride stran lepo...sam ko se pa odpre pa ne