Jak zarovnat prvky na stejném řádku v programu Divi

Schopnost vertikálně zarovnat obsah při vytváření webu pomocí divi může být užitečným doplňkem vašeho návrhářského nástroje. Někdy určité ustanovení vyžaduje, aby obsah je zarovnána vertikálně různými způsoby (na střed, dole, nahoře). Nejčastější potřebou je vycentrovat vaše obsah vertikálně.

Poskytuje příjemný nádech symetrických mezer, který se hodí při použití více rozvržení sloupců pro váš obsah. Vertikálně vycentrovaný obsah navíc zůstává vycentrován na různé šířky prohlížeče, což eliminuje potíže s používáním vlastních výplní nebo okrajů pro dosažení podobné odezvy.

V tomto tutoriálu vám ukážu, jak přidat několik malých úryvků CSS do libovolného sloupce, aby se obsah vertikálně zarovnal. Použiji některé z předem připravených rozložení z divi pro příklady, jak to udělat. Pokud se v CSS moc nevyznáte, nemusíte se bát. Bude to docela snadné aplikovat na vaše vlastní rozvržení během několika sekund.

Pochopení Flex a Divi

Vlastnost css Flex (nebo Flexbox) je jednoduše způsob, jak umístit položky do vodorovných a / nebo svislých stohů (podobně jako tabulka). S výjimkou, na rozdíl od tradičních tabulek, vám vlastnost flex umožňuje vytvářet pole, která se přizpůsobí velikosti obsahu, který obsahuje.

divi používá vlastnost flex vždy, když jako parametr řádku vyberete "Equalize Column Heights". To jednoduše zajistí, že se velikost vašich sloupců přizpůsobí velikosti sloupce s největším obsahem. A protože „Equalize Column Heights“ umožňuje flexibilitu pro kontejner řádků, můžete ji snadno využít přidáním css do vašich sloupců a upravit obsah každého sloupce (nebo oblasti).

Například pokud do sloupce v řádku přidáte „margin: auto“, obsah tohoto sloupce (ať už je to jeden nebo více modulů) se stane svisle na střed.

Kromě toho, pokud do řádku přidáte „zarovnat položky: střed“, budou všechny sloupce (a jejich obsah) vycentrovány svisle na střed.

Samozřejmě existuje mnoho dalších použití vlastnosti Flex ve webovém designu, stejně jako pokročilejší CSS, které můžete na své téma použít. Ale pro tento tutoriál jsem chtěl, aby to bylo jednoduché.

Je to opravdu nutné?

Technicky ne. Svůj obsah / moduly můžete ve sloupci vertikálně zarovnat pomocí vlastních mezer (odsazení a okraj). Můžete například použít možnosti rozložení Divi a dát sloupci rovnou horní a dolní výplň pro vycentrování modulů ve sloupci vertikálně. Do sloupce můžete také přidat pouze horní výplň, abyste zarovnali spodní obsah. Při aktualizaci stránky o více obsahu však možná budete muset upravit mezery. Navíc může být obtížné udržovat toto zarovnání napříč různými šířkami prohlížeče.

Takže pokud hledáte řešení pro svislé zarovnání obsahu, aniž byste museli přemýšlet o vlastních mezerách, myslím, že vám to bude užitečné.

Začněme!

Načtěte předdefinované rozvržení na stránku

Nejprve použiji rozvržení z portfolia společnosti Interior Design Company. Chcete-li toto rozvržení získat na své stránce, vytvořte novou stránku. Poté pojmenujte svou stránku. Klikněte na „Use Divi Builder“ a poté na „Use Visual Builder“. Poté vyberte možnost „Zvolit základní rozložení“. Poté v rozbalovacím okně Načíst z knihovny vyberte sadu rozvržení společnosti Interior Design Company. Nakonec vyberte stránku Portfolio ze seznamu rozvržení a klikněte na „Použít toto rozvržení“.

Jakmile je rozvržení načteno na vaši stránku, můžete začít.

Metoda 1: Jak svisle zarovnat obsah pomocí Flex a Auto Margin

Otevřete nastavení řádku pro druhý řádek stránky (ten přímo pod řádkem s nadpisem stránky). V části Nastavení návrhu otevřete skupinu možností dimenzování a všimněte si, že "Vyrovnat výšky sloupců" je již aktivní. To znamená, že na řádku je nyní přidána vlastnost flex („display: flex;“).

Nyní přejděte do nastavení karty Upřesnit pro stejný řádek a přidejte následující úryvek css pod vstupní pole hlavního prvku ve sloupci 2.

Nyní byl obsah druhého sloupce přesunut, aby byl vertikálně vystředěn.

Zarovnejte nižší obsah

Pokud chcete svůj obsah zarovnat na spodní část tak, aby se všechny moduly skládaly ve spodní části sloupce, můžete upravit hodnotu okraje následujícím způsobem:

Vertikální zarovnání obsahu pro všechny sloupce ve vašem řádku

Místo přidání „margin: auto“ do každého sloupce samostatně můžete také vertikálně vycentrovat obsah všech sloupců v řádku přidáním následujícího fragmentu k hlavnímu prvku nastavení řádku.

Nebo pokud chcete, aby byl veškerý obsah vašich sloupců zarovnán dole, můžete přidat tento výňatek:

A nezapomeňte, že můžete využít funkce Divi's Extend Styles kliknutím pravým tlačítkem myši na hlavní prvek pomocí úryvku CSS a kliknutím na „Rozšířit hlavní prvek“.

Poté rozbalte tento hlavní prvek css na všechny řádky stránky (nebo sekce) a svisle vycentrujte veškerý obsah každého sloupce na stránce.

Nyní je vše soustředěno svisle.

Možná jste si však všimli, že barva pozadí bílého sloupce již nepokrývá celou výšku řádku. Je to proto, že jsme do sloupce přidali „margin: auto“. Chcete-li tento problém vyřešit, můžete změnit barvu pozadí čáry na bílou a odebrat výplň z čáry. Ale místo toho vám ukážu způsob, jak vycentrovat obsah sloupce beze změny okraje.

Metoda 2: Zarovnejte obsah svisle pomocí směru ohnutí sloupce

V první metodě jsme využili výhody vlastnosti flex přidané do řádku. Díky tomu byl každý z našich sloupů „flexibilní rámeček“, který bylo možné vertikálně zarovnat jednoduchým nastavením okraje.

Existuje ale také způsob flex-direction, jak sladit obsah sloupců, aniž bychom ztratili efekt „Vyrovnat výšku sloupce“, který udržuje naše sloupce (a pozadí sloupců) stejné velikosti. K tomu přidáme do našeho sloupce několik řádků CSS, aby byly všechny moduly ve sloupci naskládány svisle a poté vycentrovány.

Vraťme se k naší linii v předchozím příkladu. Otevřete nastavení řádků a odeberte všechny vlastní css, které tam můžete mít, kliknutím pravým tlačítkem na vlastní CSS a kliknutím na „Obnovit vlastní styly CSS“.

Poté do sloupce 2, hlavní prvek, přidejte následující CSS:

displej: flex; směr flexu: sloupec; justify-content: center;

Nebo, pokud bych chtěl zarovnat obsah dole, stačí nahradit „Zarovnat obsah: střed“ za „zarovnat obsah: flex-end“.

Skvělé na tomto nastavení je, že pokud je můj obsah vycentrován svisle a je dosažena šířka řádku, obsah zůstane vycentrován.

Vytvářejte chyby (shrnutí) s různými množstvími svisle zarovnaného textu

Upravit obsah sloupce svisle na střed může být také užitečné pro reklamy. Jak víte, ne všechny reklamy budou obsahovat přesné množství textu použitého pro dzapsat funkci nebo službu. Vertikální vystředění těchto reklam může vytvořit krásný design pro vaše rozvržení.

V tomto příkladu svisle zarovnám rozostření podle rozložení domovské stránky Digital Payments.

Nejprve přidám do rozmazání různá množství hlavního textu, abych poskytl realističtější představu o tom, jak by web mohl vypadat.

Teď musím jít do nastavení linky a "Harmonizovat výšky sloupců".

Nyní mohu přidat úryvky CSS, abych přizpůsobil svůj obsah a upravil návrh.

Na kartě Upřesnit v nastavení řádku můžeme vertikálně vycentrovat obsah našich sloupců přidáním následujícího v části Hlavní prvek:

Nebo je můžete změnit tak, že je provedete podle řádku.

Můžete také resetovat své vlastní styly CSS a přidat následující vlastní okraje pro zarovnání prvního a třetího zarovnaného sloupce nahoru.

1 sloupec hlavní prvek CSS:

3 sloupec hlavní prvek CSS:

A co rozvržení jednoho sloupce?

Technicky vzato nepotřebujete úryvek CSS ani flex, abyste svisle vycentrovali obsah sloupce. Vše, co musíte udělat, je ujistit se, že máte stejné mezery nad a pod vaším obsahem (nebo moduly). Uživatelé většinou potřebují vertikální obsah soustředěný na rozvržení s více sloupci, protože chtějí, aby se sousední obsah dokonale seřadil.

To je vše pro tento tutoriál, který vám ukáže, jak zarovnat prvky na stejném řádku v Divi.