Určitě jste ten nedostatek pocítili všichni: Máte v DIVI v řádku dva sloupce, v levém obrázek, v pravém nadpis, text a třeba tlačítko… a řešíte paddingy a marginy jako zběsilí, aby to bylo jakž takž zarovanané naspod. Nebo na středu. A pak přijde ke slovu responzivita a můžete začít znovu.
Dobrá zpráva: je lepší způsob, jak to řešit, než odsazením.
Flex to vyřeší
Pokud znáte CSS Flexbox, pak je řešení jednoduché. (A pokud náhodou ne, silně doporučuji se ho naučit ;-))
1) V řádku nastavte stejnou výšku sloupců:
2) Na sloupci, jehož obsah chcete vertikálně zarovnat, najděte CSS pro hlavní prvek:
3) Dejte tomu, že chcete obsah ve sloupci zarovnat dolů (stejně to funguje i na střed a opravdu to na středu vždy bude). Pak stačí říct, že se má obsah rovnat pomocí flexboxu display:flex a ještě ho zarovnat na konec sloupce align-items: flex-end. A to je vše, opravdu.
display: flex;
align-items: flex-end;
Samozřejmě, jakmile bude okno dostatečně malé, aby se sloupce srovnaly pod sebe (na tabletu), předstane mít flexbox efekt. Ale pro desktop se to hodí.
Tip
Toto je skvělý tutoriál na FlexBox. Pokud tedy budete chtít jiné zarovnání, např. na střed, najdete ho tu.
