verticalni vzcentrování v rodičovském divu

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

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.

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.

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.

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.

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ý.

Tomášeek:
IE 11, nižší jsem nezkoušel files.rjwebdesign.cz/i/20170112-104642.png

Tomášeek:
Nic?