Autor Zpráva
robbie
Profil
Ahoj, máte nějaký krátky fígl, jak verticálně vycentrujete např. <div class="child">, ktery je v v rodičovském divu např.<div class="wrapper">.
Děkuji moc za radu
pcmanik
Profil
robbie:
Vertical align anything with just 3 lines of CSS alebo Flex.

Pred tým než sa tu zhŕknu všetci miestni odporcovia moderných riešení, tak uvediem podporu:
Transform: IE >= 9
Flex: IE >= 12
Tomášeek
Profil
pcmanik:
... alebo display: table[-cell] s podporou vč. IE8, rovněž na 2 řádky. Sice nemoderně, ale stejně krátce, ne-li kratšeji a s širší podporou.
pcmanik
Profil
Tomášeek:
To riešenie nieje dobré, väčsinou treba mať vo wrapperi aj absolútne pozicované prvky, alebo iné prvky u ktorých nechceme mať displat table-cell.
Taktiež parent v tomto prípade wrapper musí mať nastavenú šírku na 100% keďže tabuľka sa prispôsobuje obsahu a nevyplní tak celú šírku webu.
Tomášeek
Profil
pcmanik:
väčsinou treba mať vo wrapperi aj absolútne pozicované prvky
Nerozumím. V zadání nic takového není, mít většinou potřebu v nějakém wrapperu cokoliv absolutně pozicovat, nemám.

Taktiež parent v tomto prípade wrapper musí mať nastavenú šírku na 100% keďže tabuľka sa prispôsobuje obsahu a nevyplní tak celú šírku webu.
Není nutné mít 100% šířku. Ano, .child nějakou šířku mít zadanou bude, ale to bude mít i tak (pouze v případě 100% jei možná budeme muset uvést navíc). Pokud má obsah sám o sobě dostatečnou šířku, typicky obrázek, nebo text, ani těch 100% nebude třeba deklarovat, element se natáhne sám.

Není tu konkrétní zadání, tak jsem jen doplnil třetí možnost, v 99% případů použitelnou a funkční ve 100% z nich (narozdíl od jiných). Tazatel nechť si vybere, co pro svůj záměr použije, jestli chce být nutně cool, nebo chce použít řešení, které nemá oproti jiným problémy a nedostatky, byť je tvou terminologií asi už out.
Kcko
Profil
Tomášeek:
Tvoje řešení se hodí jen někdy. Používal jsem to taktéž do doby, než jsem potřeboval mít v objektu s display: table-cell obrázek, který se bude responsivně přizpůsobovat šířce.
IE 11 a níže toto chování samozřejmě ignoruje viz Živá ukázka, proto mi zarovnání transformací taky přijde lepší, čitelnější a podpora je víc než dobrá.

Když si to vezmeme, tak to člověk neuvídí zarovnané v IE 8, s tím se dá žít, problém který jsem nastínil a jeho chování i v IE 11 je podle mě horší.

Taky pouze doplňuji a nevyvolávám žádný flame.
Tomášeek
Profil
Kcko:
To tvé zadání, pokud jsem pochopil správně, by mělo být řešitelné poměrně snadno (velikost jsem zvýšil z 300px na 500px, aby se změna projevila i na tvém odkazu).

Živá ukázka

Mělo by stačit tabulce nastavit width: 100% a max-width: 300/500px. Pak obrázek bude mít šířku vždy max 100%, nejvíce však 300/500px. Je to řešení tebou nastíněného problému? Nebo jsi myslel něco jiného?

Ještě dodám, aby někdo nekritizoval zdlouhavost zápisu, že .table-row je zde zbytečný.
Kcko
Profil
Tomášeek:
IE 11, nižší jsem nezkoušel files.rjwebdesign.cz/i/20170112-104642.png
Kcko
Profil
Tomášeek:
Nic?

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: