Vertikální zarovnání ikonek řešených pomocí spritů

Ahoj,

potýkám se trochu s problémem zarovnání ikonek. Pro každou ikonku mám vlastní element (např. <i class="icon-example"></i>), protože obrázky mám poskládané na co nejmenší ploše v jednom souboru. Otázkou ale je, jak takové ikonky zarovnat vertikálně na střed.

Klasický styl pro ikonky je display: inline-block; vertical-align: middle; + rozměry každé z nich, ale ikonky prostě vycentrované nejsou.

Neměl by někdo nějaký tip, než kontrolovat a opravovat každou ikonku zvlášť? :-)

Zdá se, že vertikální zarovnávání nefunguje ani teď.

janbarasek:
To nechci, protože pak nemůžu inteligentně používat sprity, navíc rozměry u žádného elementu s textem nejsou prakticky nikdy známy.

Bubák:
„vertical-align funguje jinak, než si myslíš.“
vertical-align nefunguje :-)

Nesnažil jsem se o čtverec, každou ikonku mám v souboru a pak na obrázky/ikonky spustí algoritmus pro rozmisťování (floorplanning), konkrétně využívám službu ZeroSprites.com, dojde tedy k vytvoření nejmenšího spritu.

Živá ukázka

Z ukázky je patrné, že šedé boxíky nejsou vertikálně zarovnány na střed., především v tom prvním případě. Zkoušel jsem laborovat a místo paddingu použít line-height, ale v některých případech to vycentrováno není.

Chamurappi:
To sice řeší problém ten, že obrázek je vedle textu vycentrovaný, ale přitom se celý text posune asi o dva pixely níž, takže zase není vycentrovaný ten text v rámci elementu :-)