Amikor webhelyet hoz létre a Divi használatával, a tartalom függőleges igazítása értékes kiegészítője lehet a tervezési eszköztárnak. Az elrendezéstől függően előfordulhat, hogy a tartalmat különböző módokon (középen, alul, felül) függőlegesen igazítani kell. A leggyakoribb igény az, hogy az anyag függőlegesen legyen igazítva. Szép szimmetrikus térközt kölcsönöz a tartalomnak, ami nagyon hasznos több oszlopelrendezés használatakor. Ezen túlmenően a függőlegesen középre helyezett tartalom a böngésző szélességének közepén marad, így nincs szükség egyéni kitöltésre vagy margókra a hasonló reakcióképesség eléréséhez.
Ebben a leckében megtanítom, hogyan lehet függőlegesen igazítani a tartalmat bármely oszlopban néhány egyszerű CSS-sor segítségével. Bemutató céljára a Divi több előre gyártott elrendezését fogom használni. Nem kell aggódnia, ha nem ismeri a CSS-t. Pillanatok alatt alkalmazhatja ezt a tervében.
- A Flex és a Divi közötti különbség megértése
- Ez kötelező?
- Adja hozzá az előre konfigurált elrendezést az oldalához.
- 1. módszer: Tartalom függőleges igazítása Flex és Auto Margin funkcióval
- A tartalom igazítása alul
- Függőleges tartalomigazítás a sor oszlopaihoz
- 2. módszer: Tartalom függőleges igazítása oszlophajlítási irány segítségével
- Mi a helyzet az egyetlen oszlopot tartalmazó elrendezésekkel?
- Utolsó gondolatok a DIVI függőleges és vízszintes igazításáról
A Flex és a Divi közötti különbség megértése
A Flex (vagy Flexbox) CSS attribútum csak egy eszköz az elemek vízszintes és függőleges halmokba rendezésére (olyan, mint egy táblázat). A tipikus táblázatokkal ellentétben azonban a flex funkció lehetővé teszi olyan dobozok létrehozását, amelyek a bennük lévő tartalom méretéhez igazodnak.
A Divi a flex attribútumot használja, amikor az „Oszlopmagasságok kiegyenlítése” lehetőséget választja sorbeállításként. Egyszerűen fogalmazva, ez biztosítja, hogy az összes oszlop mérete a legtöbb információt tartalmazó oszlop méretéhez igazodik. Mivel az „Oszlopmagasságok kiegyenlítése” kiváltja a sortároló rugalmasságát, használhatja ezt úgy, hogy CSS-t ad az oszlopokhoz, hogy módosítsa az egyes oszlopok (vagy dobozok) tartalmát.
Ha egy sor bármely oszlopához hozzáadja a „margin: auto” szót, amp az oszlop tartalma (akár egy, akár több modulról van szó) függőlegesen középre kerül.
Az összes oszlop (és azok tartalma) függőlegesen középre kerül, ha hozzáadja az „align-items: center;” kifejezést. a te sorodhoz.
Természetesen a flex tulajdonság sokkal több webdesign-alkalmazást és fejlettebb CSS-t tartalmaz, amelyeket felhasználhat a témában. Ennek az oktatóanyagnak az egyszerűségét azonban szerettem volna megőrizni.
Ez kötelező?
Technikai értelemben nem Használhat egyéni térközt a tartalom/modulok függőleges elhelyezésére egy oszlopon belül (kitöltés és margó). Használhatja amp a Divi térközbeállításait, hogy a modul(oka)t függőlegesen középre állítsa a sorban, hogy egy oszlopot egyenlő legyen a felső és az alsó kitöltés. A tartalmat alulra igazíthatja, ha felső kitöltést ad egy oszlophoz. Ha további tartalmat ad hozzá az oldalához, előfordulhat, hogy módosítania kell a térközt. Ezen túlmenően, ennek az igazításnak a fenntartása több böngészőméret között problémás lehet.
Tehát, ha az információk függőleges igazításának módját keresi anélkül, hogy aggódnia kellene a konkrét térközök miatt, akkor azt hiszem, hogy ezt hasznosnak találja.
Kezdődjön a buli!
Adja hozzá az előre konfigurált elrendezést az oldalához.
Kezdem a belsőépítész cég portfólió oldalelrendezésével. Hozzon létre egy új oldalt, hogy ez az elrendezés megjelenjen az oldalon. Ezután adjon nevet az oldalának. A legördülő menüből válassza a „Divi Builder használata”, majd a „Visual Builder használata” lehetőséget. Ezután válassza a „Válasszon előre elkészített elrendezést” lehetőséget a legördülő menüből. Ezután válassza ki az Interior Design Company Layout Packet a Betöltés a könyvtárból ablakban. Végül az elrendezések kiválasztásánál válassza ki a Portfólió oldalt, és kattintson az „Az elrendezés használata” gombra.
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-28.png)
Az elrendezés betöltése után készen áll a kezdésre.
1. módszer: Tartalom függőleges igazítása Flex és Auto Margin funkcióval
Nyissa meg a második sor sorbeállításait (a közvetlenül az oldal címét tartalmazó sor alatti sor beállításait). Nyissa meg a Méretezés opciócsoportot a tervezési beállításoknál, és vegye figyelembe, hogy az „Oszlopmagasságok kiegyenlítése” már aktív; Ez azt jelenti, hogy a flex tulajdonság („display: flex;”) hozzáadásra került a sorhoz.
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-27.png)
A 2. oszlop fő eleme beviteli mezőben lépjen a Speciális lap beállításaihoz ugyanahhoz a sorhoz, és adja hozzá a következő CSS-kódrészletet.
A második oszlop tartalma most át lett helyezve függőlegesen középre.
01 | margó: auto; |
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-26.png)
A tartalom igazítása alul
A margó értékét az alábbiak szerint módosíthatja, hogy a tartalom alulra igazodjon, és így az összes modul az oszlop alján kerüljön egymásra:
01 | margó: auto 0; |
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-25.png)
Függőleges tartalomigazítás a sor oszlopaihoz
A sor összes oszlopának tartalmát függőlegesen középre állíthatja, ha a következő kódrészletet hozzáadja a sorbeállítások fő eleméhez, ahelyett, hogy minden oszlophoz külön-külön hozzáadná a „margó: auto” szót.
01 | align-ites: center; |
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-24.png)
Ezt a kódrészletet akkor is használhatja, ha azt szeretné, hogy az oszlopaiban lévő összes információ alul legyen igazítva:
01 | align-ites: flex-end; |
Ne feledje, hogy használhatja a Divi Stílusok kiterjesztése funkcióját, ha a jobb gombbal a CSS-kódrészlet fő elemére kattint, és kiválasztja a „Fő elem kiterjesztése” lehetőséget.
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-23.png)
Ezután az oldal minden oszlopának teljes tartalmának függőleges középre helyezéséhez alkalmazza a CSS fő elemet az oldal (vagy szakasz) összes sorára.
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-22.png)
Most már minden függőlegesen kiegyensúlyozott.
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-21.png)
Azonban előfordulhat, hogy észrevette, hogy a fehér oszlop háttérszíne már nem fedi le a teljes sort, mivel az oszlophoz hozzáadta a „margó: auto”. Ezt úgy orvosolhatja, hogy a sor háttérszínét fehérre változtatja, és eltávolítja a sor kitöltését. Ehelyett megtanítom, hogyan állítsa középre az oszlop tartalmát anélkül, hogy módosítani kellene a margót.
2. módszer: Tartalom függőleges igazítása oszlophajlítási irány segítségével
A sorhoz először hozzáadott flex tulajdonságot használtuk. Ennek eredményeként minden oszlopunk egy „flex box” lett, amelyet a margó változtatásával függőlegesen lehetett igazítani.
Használhatjuk azonban a rugalmas irányt az oszlopunk szövegének igazítására anélkül, hogy feláldoznánk az „Oszlopmagasság kiegyenlítése” hatást, amely az oszlopainkat (és az oszlopháttereinket) azonos méretben tartja. Ennek elérése érdekében néhány sor CSS-t adunk a sorunkhoz, így a benne lévő összes modul függőlegesen, majd középre kerül.
Térjünk vissza az előző amp . Ha jobb gombbal kattint az Egyéni CSS-re, és kiválasztja az „Egyéni CSS-stílusok visszaállítása” lehetőséget, eltávolíthat minden egyéni CSS-t a sorbeállításokból.
Ezután a 2. oszlop fő elemében alkalmazza a következő CSS-t:
010203 | kijelző: flex;hajlítási irány: oszlop;justify-content: center; |
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-20.png)
Módosítsa a „justify-content: center”-et „justify-content: flex-end”-re a tartalom alsó igazításához.
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-19.png)
Szeretem ezt a konfigurációt, mert ha függőlegesen helyezem el a tartalmat, és a sort teljes szélességűvé teszem, a tartalom középen marad.
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-18.png)
Függőlegesen igazított összemosások készítése különböző mennyiségű szöveggel
Ha az oszlopok tartalmát függőlegesen középre állítja, az is segíthet a homályosításban. Amint azt Ön is tudja, nem minden kivonatban lesz ugyanannyi szöveg egy funkció vagy szolgáltatás leírásához. Ha ezeket az elmosódásokat függőlegesen középre állítja, az elrendezése gyönyörűvé válhat.
A Digitális fizetések kezdőlapjának elrendezése esetén ebben amp függőlegesen igazítom az elmosódásokat.
A webhely megjelenésének valósághűbb ábrázolása érdekében először különböző mennyiségű törzstartalommal egészítem ki a homályos elemeket.
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-17.png)
Most ki kell egyenlítenem az oszlopmagasságokat a sorbeállításokban.
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-16.png)
Most már CSS-részletek segítségével igazíthatom a szöveget, és módosíthatom a dizájnt.
Oszlopaink tartalmát függőlegesen középre állíthatjuk, ha a következőket adjuk a Sorbeállítások Speciális lapjának Fő elem részéhez:
01 | align-ites: center; |
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-15.png)
Kérjük, módosítsa a következőre, hogy alul igazítsa őket.
01 | align-ites: flex-end; |
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-14.png)
Az első oszlopot alulra, a harmadikat felülre igazíthatja az egyéni CSS-stílusok alaphelyzetbe állításával és a következő egyéni margók hozzáadásával.
1. oszlop CSS fő elem:
01 | margó: auto auto 0; |
3. oszlop fő eleme CSS:
01 | margó: 0 auto auto; |
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-13.png)
Mi a helyzet az egyetlen oszlopot tartalmazó elrendezésekkel?
Nincs szüksége CSS-kódrészletre vagy hajlításra ahhoz, hogy az egyoszlopos tartalmat függőlegesen középre állítsa. Mindössze annyit kell tennie, hogy a szövegben egyenlő távolság legyen fent és alatt (vagy modulok között). A legtöbb fogyasztó függőlegesen középre helyezett tartalmat igényel sok oszlopos elrendezésen, mert azt akarja, hogy a szomszédos anyagok megfelelően illeszkedjenek egymáshoz.
Utolsó gondolatok a DIVI függőleges és vízszintes igazításáról
Annak ellenére, hogy ez a megoldás az egyéni CSS néhány apró töredékére támaszkodik, úgy érzem, hogy hasznos lehet azoknak, akik gyors gyógymódot keresnek egy időigényes eljárásra. Nyugodtan ossza meg véleményét erről a megközelítésről, valamint amp meg velünk, hogyan takarított meg időt és erőfeszítést a múltban.
Köszönöm a világos magyarázatot. Ez azonban nem működik Blog modullal. Ekkor csak 1 oszlop van a sorban. Az egymás melletti blogok számát a modul határozza meg (alapértelmezett 3). Az itt található oszlopok is azonosak lehetnek?
Szia! Nem, sajnálom, hogy csak a klasszikus DIVI oszlopokhoz készült, a DIVI blog modulnak teljesen más kódja van az oszlopok igazításához.
Mi a teendő, ha azt szeretné, hogy a modul 2/3-ban lefelé vagy 1/3-ban felülről legyen igazítva – és nem tökéletesen középen felül vagy alul?
Szia! Attól tartok, hogy egyéni CSS-t kell csinálni, alapértelmezés szerint nincs ilyen lehetőség.
Megpróbálhatja a tartalmat középen igazítani, és néhány kitöltést hozzáadni a tartalomhoz, de kérjük, alaposan ellenőrizze a megjelenítést minden eszközön.