Ako zarovnať prvky na rovnakom riadku v programe Divi

Schopnosť vertikálneho zarovnania obsah pri vytváraní stránky s divi môže byť užitočným doplnkom vášho dizajnérskeho nástroja. Niekedy určité ustanovenie vyžaduje, aby obsah je vertikálne zarovnané rôznymi spôsobmi (na stred, dole, hore). Najčastejšou potrebou je vycentrovať svoje obsah vertikálne.

Poskytuje lahodný nádych symetrických rozstupov, ktorý sa hodí pri použití rozloženia viacerých stĺpcov pre váš obsah. Vertikálne vycentrovaný obsah navyše zostáva vycentrovaný na rôzne šírky prehľadávača, čo eliminuje problém s používaním vlastných výplní alebo okrajov na dosiahnutie podobnej odozvy.

V tomto návode vám ukážem, ako pridať niekoľko malých úryvkov CSS do ľubovoľného stĺpca, aby ste obsah zarovnali vertikálne. Použijem niektoré z vopred pripravených rozložení z divi pre príklady, ako to urobiť. Ak o CSS veľa neviete, nemusíte sa báť. Bude to celkom jednoduché aplikovať na svoje vlastné rozloženia v priebehu niekoľkých sekúnd.

Pochopenie Flex a Divi

Vlastnosť css Flex (alebo Flexbox) je jednoduchý spôsob umiestnenia položiek do vodorovných a / alebo zvislých stohov (podobne ako tabuľka). Okrem na rozdiel od tradičných tabuliek vám vlastnosť flex umožňuje vytvárať polia, ktoré sa prispôsobia veľkosti obsahu, ktorý obsahuje.

divi používa vlastnosť flex vždy, keď ako parameter riadka vyberiete „Equalize Column Heights“. To jednoducho zabezpečí, že veľkosť vašich stĺpcov sa prispôsobí veľkosti stĺpca s najväčším obsahom. A keďže „Equalize Column Heights“ umožňuje flexibilitu pre riadkový kontajner, môžete to jednoducho využiť pridaním css do svojich stĺpcov a upraviť obsah každého stĺpca (alebo oblasti).

Napríklad ak do stĺpca v rade pridáte výraz „margin: auto“, obsah tohto stĺpca (či už je to jeden alebo viac modulov) bude zvisle vycentrovaný.

Okrem toho, ak do svojho riadku pridáte zarovnávacie položky: stred, všetky stĺpce (a ich obsah) budú vertikálne centrované.

Samozrejme, pre vlastnosť Flex vo webovom dizajne existuje mnoho ďalších použití, ako aj pokročilejšie CSS, ktoré môžete použiť na svoju tému. Ale pre tento tutoriál som chcel, aby bol jednoduchý.

Je to skutočne nevyhnutné?

Technicky nie. Svoj obsah / moduly môžete v stĺpci vertikálne zarovnať pomocou vlastných medzier (polstrovanie a okraj). Môžete napríklad použiť možnosti Diviho medzery a dať tak stĺpiku, ktorý sa rovná hornej a dolnej výplni, a vycentrovať tak moduly (moduly) vertikálne v stĺpci. Do stĺpca môžete tiež pridať iba hornú výplň, aby ste zarovnali spodný obsah. Pri aktualizácii stránky s väčším obsahom však možno budete musieť upraviť medzery. Okrem toho môže byť ťažké zachovať toto zarovnanie naprieč rôznymi šírkami prehľadávača.

Takže ak hľadáte riešenie na zvislé zarovnanie obsahu bez toho, aby ste museli myslieť na vlastné medzery, myslím, že vám to bude užitočné.

Začnime!

Načítať vopred definované rozloženie na svoju stránku

Na začiatok použijem rozloženie z rozsahu portfólia spoločnosti Interior Design Company. Ak chcete získať toto rozloženie na svojej stránke, vytvorte novú stránku. Potom zadajte názov svojej stránky. Kliknite na „Použiť Divi Builder“ a potom na „Použiť Visual Builder“. Potom vyberte možnosť „Vybrať základné rozloženie“. Potom z rozbaľovacieho okna Načítať z knižnice vyberte súpravu rozloženia spoločnosti Interior Design Company. Nakoniec vyberte stránku Portfólio zo zoznamu rozložení a kliknite na tlačidlo „Použiť toto rozloženie“.

Po načítaní rozloženia na svoju stránku ste pripravení ísť.

Metóda 1: Ako vertikálne zarovnať obsah pomocou nástrojov Flex a Auto Margin

Otvorte nastavenia riadkov pre druhý riadok stránky (priamo pod riadkom s nadpisom stránky). V rámci nastavení návrhu otvorte skupinu možností dimenzovania a všimnite si, že funkcia „Vyrovnať výšky stĺpca“ je už aktívna. To znamená, že na riadok je teraz pridaná vlastnosť flex („display: flex;“).

Teraz prejdite do nastavení karty Rozšírené pre ten istý riadok a do vstupného poľa hlavného prvku stĺpca 2 pridajte nasledujúci úryvok css.

Teraz sa obsah druhého stĺpca presunul tak, aby bol vertikálne centrovaný.

Zarovnajte nižší obsah

Ak chcete svoj obsah zarovnať na spodnej časti tak, aby sa všetky moduly ukladali do spodnej časti stĺpca, môžete upraviť hodnotu okraja nasledujúcim spôsobom:

Vertikálne zarovnanie obsahu pre všetky stĺpce vo vašom riadku

Namiesto pridania výrazu „margin: auto“ do každého stĺpca osobitne môžete tiež vertikálne vycentrovať obsah všetkých stĺpcov v riadku pridaním nasledujúceho úryvku k hlavnému prvku nastavenia riadkov.

Alebo ak chcete, aby bol celý obsah stĺpcov zarovnaný v dolnej časti, môžete pridať tento výňatok:

A nezabudnite, že funkciu Divi's Extend Styles môžete využiť kliknutím pravým tlačidlom myši na hlavný prvok pomocou úryvku CSS a kliknutím na položku „Extend main element“.

Potom rozšírte tento hlavný prvok css na všetky riadky stránky (alebo sekcie) tak, aby vertikálne centroval celý obsah každého stĺpca na stránke.

Teraz je všetko vertikálne centrované.

Možno ste si všimli, že farba pozadia bieleho stĺpca už nepokrýva celú výšku riadku. Je to tak preto, lebo sme do stĺpca pridali výraz „margin: auto“. Ak chcete vyriešiť tento problém, môžete zmeniť farbu pozadia čiary na bielu a odstrániť z nej výplň. Namiesto toho vám však ukážem spôsob, ako vycentrovať obsah stĺpca bez zmeny okraja.

Metóda 2: Zarovnajte obsah vertikálne pomocou smeru ohybu stĺpca

V prvej metóde sme využili výhodu vlastnosti flex pridanej do riadku. Toto urobilo z každého nášho stĺpca „flexibilné pole“, ktoré bolo možné vertikálne zarovnať jednoduchým nastavením okraja.

Existuje však aj spôsob flexibilného smeru na zosúladenie obsahu stĺpcov bez straty efektu „Vyrovnať výšku stĺpca“, ktorý udržuje naše stĺpce (a pozadia stĺpcov) rovnakej veľkosti. Za týmto účelom do nášho stĺpca pridáme niekoľko riadkov CSS, aby boli všetky moduly v stĺpci naskladané zvisle a potom vycentrované.

Vráťme sa k nášmu riadku v predchádzajúcom príklade. Otvorte nastavenia riadkov a odstráňte všetky vlastné CSS, ktoré tam môžete mať, kliknutím pravým tlačidlom myši na vlastné CSS a kliknutím na „Obnoviť vlastné štýly CSS“.

Potom do stĺpca 2, hlavný prvok, pridajte nasledujúci CSS:

displej: flex; smer ohybu: stĺp; justify-content: center;

Alebo, ak by som chcel zarovnať obsah na spodku, nahraďte text „Zarovnať obsah: stred“ za „zarovnajte obsah: flex-end“.

Na tomto nastavení je skvelé to, že ak je môj obsah vycentrovaný vertikálne a je dosiahnutá šírka riadku, obsah zostane vycentrovaný.

Vytvorte chyby (zhrnutie) s rôznymi množstvami vertikálne zarovnaného textu

Vertikálne vycentrovanie obsahu stĺpca môže byť tiež užitočné pre reklamy. Ako viete, nie všetky reklamy budú obsahovať presné množstvo textu použitého na dzapísať funkciu alebo službu. Vertikálne vycentrovanie týchto reklám môže vytvoriť krásny dizajn pre vaše rozloženie.

V tomto príklade vertikálne zarovnám rozmazania podľa rozloženia domovskej stránky Digitálnych platieb.

Najskôr pridám do rozmazaní rôzne množstvá základného textu, aby som realistickejšie predstavil, ako by stránka mohla vyzerať.

Teraz musím ísť na nastavenie linky a „Zosúladiť výšky stĺpcov“.

Teraz môžem pridať útržky CSS, aby som zosúladil svoj obsah a upravil dizajn.

Na karte Pokročilé v nastaveniach riadkov môžeme vertikálne vycentrovať obsah našich stĺpcov pridaním nasledujúcich prvkov do časti Hlavný prvok:

Alebo ho zmeňte tak, že ich zoradíte.

Môžete tiež resetovať svoje vlastné štýly CSS a pridať nasledujúce vlastné okraje, aby ste zarovnali dno prvého stĺpca a tretí zarovnaný vrchol stĺpca.

Hlavný prvok stĺpca CSN 1:

Hlavný prvok stĺpca CSN 3:

A čo rozloženia jedného stĺpca?

Z technického hľadiska na vertikálne vycentrovanie obsahu stĺpca nepotrebujete žiadny CSS ani flex snippet. Všetko, čo musíte urobiť, je ubezpečiť sa, že máte rovnaké medzery nad a pod obsahom (alebo modulmi). Používatelia väčšinou potrebujú vertikálny obsah, ktorý je zameraný na rozloženia s viacerými stĺpcami, pretože chcú, aby sa susedný obsah dokonale zoradil.

To je všetko pre tento návod, ktorý vám ukáže, ako zarovnať prvky na rovnakom riadku v Divi.