Autor Zpráva
joe
Profil
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
Profil
joe:
Tak jí zkus vykreslovat jako pozadí DIVu, který bude mít nastavené nějaké rozměry, pak by se s ním dalo úplně normálně pracovat jako s každým jiným.
joe
Profil
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
Profil
joe:
obrázky mám poskládané na co nejmenší ploše
To nic neříká o rozmístění ikonek, snažil ses o čtverec? Podle mého bude vhodné umístit ikony do řádku, plocha sprite obrázku zůstane stejná.
vertical-align funguje jinak, než si myslíš.
Pokud si neporadíš sám, pomohl by odkaz na živou ukázku.
joe
Profil
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
Profil
Reaguji na joe:
Obal sousedící text do nějakého řádkového elementu a tomu dej také vertical-align: middle.
joe
Profil
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 :-)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: