Autor Zpráva
Stalker
Profil
Ahoj,

používám SVG ikonky v buttonu a jsou špatně vertikálně zarovnané. Když jim nastavím vertical-align: middle, tak to je to stejné, jako kdybych jim nastavil “bottom” a tím pádem jsou moc dole, ale když jim zase nastavím vertical-align: top, tak jsou o 1px výš. Jak je univerzálně vertikálně zarovnat?

Jasně, mohl bych použít například: vertical-align: top; margin-top: 1px; ale nechci mít všechny ikonky v buttonu vypozicované přes margin.

Ukázka: fiddle
Tomáš123
Profil
Stalker:
Zvislé zarovnanie môžeš nastaviť aj absolútnou hodnotou. Je jasné, prečo je obrázok vyššie ako text. Text má veľkosť 14px a obrázok je vysoký 18px. Prečnieva 4px (vertical-align: baseline – obidva prvky sedia na rovnakej úrovni). Logicky teda vychádza, že ak chceme, aby bol obrázok v strede, nastavíme mu zápornú hodnotu zvislého zarovnania rovnú polovici výškového rozdielu textu a obrázka. Tá sa počíta vzhľadom k hodnote baseline. Čo je ale divné, pri takejto hodnote nie je prvok v strede... Prečo?

Hodnota, ktorú hľadáš je zrejme -4px.

S výškou riadku to nesúvisí, s diakritikou písmen takisto nie... Ani s kurzívou. Mohol by mi to, prosím, niekto vysvetliť?
Stalker
Profil
Tomáš123 [#2]:
Spíš jsem myslel něco globálního. Když zvětším font buttonu nebo když zvětším velikost ikonek, budu muset zase měnit hodnotu "-4px" ALe je to zajímavej pohled, na kterej jsem se vůbec nedíval.
Tomáš123
Profil
Stalker:
Když zvětším font buttonu nebo když zvětším velikost ikonek, budu muset zase měnit hodnotu "-4px"
Nie aj áno. Pozíciu ide určiť aj jednotkou em, ktorej veľkosť priamo závisí od veľkosti písma (na ktorú si mal tiež už dávno použiť nejakú relatívnu jednotku). Ak zväčšíš ikonu... No, neviem. Asi to budeš musieť prerobiť.

Celkom dobre mi fungovala zmena výšky riadku a zarovanie nahor.

Hľadal som na základe čoho sa počíta umiestnenie prvku zvislo centrovaného na stred. Hodnota middle spôsobí vykreslenie, ktoré nie je v strede ani geometricky a zdánlivo ani voči písmu.


Hodnota middle vertikálne zarovná zvislý stred boxu na úroveň hodnoty baseline nadradeného prvku a posunie ho nahor o polovicu výšky písmena x (x-height).


Tento postup ale nezohľadňuje rozdielnu výšku hornej a dolnej doťažnice. Pri kapitálkach okrem toho nič nezasahuje pod základnú čiaru, čo umocňuje dojem nevyrovnanosti.

Myslím, že kvôli tomu, nie je zarovnanie na stred plne funkčné. V tvojom prípade navyše ovplyvňuje výšku nadradeného objektu nastavená výška riadku, s ktorou sa pri výpočtoch vôbec nepočíta.

Ďalšou možnosťou je poziciovanie. Potrebuješ poznať výšku a pri zmene obrázku by si musel upraviť aj veľkosť odsadenia.

Nejaký hack je na webe stackoverflow. Neviem, či súvisí s tvojim problémom.

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: