Sposobnost okomitog poravnavanja sadržaj prilikom izrade stranice sa Divi može biti zgodan dodatak vašem alatu za dizajn. Ponekad određena odredba zahtijeva da se sadržaj je okomito poravnat na različite načine (centrirano, dolje, gore). Najčešća potreba je centriranje vašeg sadržaj okomito.
Pruža ukusan dodir simetričnog razmaka koji vam dobro dođe kada koristite više izgleda stupaca za svoj sadržaj. Uz to, vertikalno centrirani sadržaj ostaje usredotočen na različite širine preglednika, uklanjajući gnjavažu s primjenom prilagođenih umota ili margina kako bi se postigla slična reakcija.
U ovom vodiču pokazat ću vam kako dodati nekoliko malih CSS isječaka u bilo koji stupac da okomito poravnate sadržaj. Upotrijebit ću neke od unaprijed napravljenih izgleda iz Divi za primjere kako to učiniti. Ako ne znate mnogo o CSS-u, ne morate brinuti. Bit će ga vrlo lako primijeniti na vlastite rasporede u nekoliko sekundi.
Razumijevanje Flexa i Divija
Svojstvo css Flex (ili Flexbox) jednostavno je način za pozicioniranje predmeta u vodoravne i / ili okomite hrpe (slično kao tablica). Osim, za razliku od tradicionalnih tablica, svojstvo flex omogućuje vam stvaranje okvira koji će se prilagoditi veličini sadržaja koji sadrži.
Divi koristi svojstvo flex kad god odaberete "Izjednači visinu stupaca" kao parametar retka. Ovo jednostavno osigurava da će se veličina vaših stupaca prilagoditi veličini stupca s najviše sadržaja. A budući da "Izjednači visinu stupaca" omogućuje fleksibilnost za spremnik retka, to možete jednostavno iskoristiti dodavanjem css-a svojim stupcima kako biste prilagodili sadržaj svakog stupca (ili područja).
Na primjer, ako dodate "margin: auto" u stupac u retku, sadržaj tog stupca (bez obzira radi li se o jednom ili više modula) postat će okomito centriran.
Osim toga, ako u svoj redak dodate "poravnati-stavke: središte", svi će vaši stupci (i njihov sadržaj) biti centrirani okomito.
Naravno, postoje mnoge druge upotrebe svojstva Flex u web dizajnu, kao i napredniji CSS koje možete primijeniti na svoju temu. Ali za ovaj vodič htio sam ga pojednostaviti.
Je li to zaista potrebno?
Tehnički, ne. Sadržaj / module možete vertikalno poravnati u stupac pomoću prilagođenih razmaka (popunjavanje i margina). Na primjer, možete koristiti Divijeve mogućnosti razmaka da biste dali stupac jednak gornjoj i donjoj podlozi za centriranje modula vertikalno u stupcu. Također u stupac možete dodati samo gornje obloge da biste poravnali donji sadržaj. Međutim, možda ćete trebati prilagoditi razmak prilikom ažuriranja stranice s više sadržaja. Uz to, može biti teško održati ovo poravnanje na različitim širinama preglednika.
Dakle, ako tražite rješenje za vertikalno poravnavanje sadržaja bez razmišljanja o prilagođenim razmacima, mislim da će vam ovo biti korisno.
Započnimo!
Učitajte unaprijed definirani izgled na svoju stranicu
Za početak ću se poslužiti izgledom iz portfelja tvrtke za dizajn interijera. Da biste dobili ovaj izgled na svojoj stranici, stvorite novu stranicu. Zatim dajte svojoj stranici naslov. Kliknite na "Use Divi Builder", a zatim na "Use Visual Builder". Zatim odaberite opciju "Odabir osnovnog izgleda". Zatim odaberite komplet za postavljanje tvrtke Interior Design iz skočnog prozora Učitaj iz knjižnice. Na kraju, odaberite stranicu Portfolio s popisa izgleda i kliknite "Koristi ovaj izgled".
Nakon što se layout učita na vašu stranicu, spremni ste za rad.
Metoda 1: Kako vertikalno poravnati sadržaj pomoću Flex i Auto Margin
Otvorite postavke crte za drugi redak stranice (onaj koji je neposredno ispod redaka s naslovom stranice). U odjeljku Postavke dizajna otvorite grupu opcija veličine i primijetite da je "Izjednačavanje visina stupaca" već aktivno. To znači da je u redak dodano svojstvo flex ("display: flex;").
Sada idite na postavke kartice Napredno za isti redak i dodajte sljedeći css isječak ispod okvira za unos glavnog elementa stupca 2.
margin: auto; |
Sadržaj drugog stupca pomaknut je da bude centriran okomito.
Poravnajte niži sadržaj
Ako želite poravnati svoj sadržaj na dnu tako da se svi moduli slažu na dnu svog stupca, možete prilagoditi vrijednost margine na sljedeći način:
margin: auto 0; |
Okomito poravnanje sadržaja za sve stupce u vašem retku
Umjesto da dodate "margin: auto" u svaki stupac pojedinačno, možete i vertikalno centrirati sadržaj svih stupaca u retku dodavanjem sljedećeg isječka glavnom elementu postavki retka.
align-items: center; |
Ili ako želite da sav sadržaj stupaca bude poravnat na dnu, možete dodati ovaj odlomak:
align-items: flex-end; |
I ne zaboravite da Divi-ovu značajku Extend Styles možete iskoristiti desnim klikom na glavni element sa svojim CSS isječkom i klikom na "Extend main element".
Zatim proširite ovaj glavni css element na sve retke stranice (ili odjeljka) da biste okomito centrirali sav sadržaj svakog stupca stranice.
Sada je sve usredotočeno okomito.
No, možda ste primijetili da boja pozadine bijelog stupca više ne pokriva cijelu visinu retka. To je zato što smo u stupac dodali "margin: auto". Da biste riješili ovaj problem, možete promijeniti boju pozadine crte u bijelu i ukloniti ispunu iz retka. No umjesto toga, pokazat ću vam način centriranja sadržaja stupca bez promjene margine.
2. metoda: Poravnajte sadržaj vertikalno koristeći pravac savijanja stupca
U prvoj smo metodi iskoristili svojstvo flex dodano retku. To je svaki naš stupac učinilo "fleksibilnim okvirom" koji se može poravnati okomito jednostavnim podešavanjem margine.
No, postoji i fleksibilan način za poravnavanje sadržaja našeg stupca bez gubitka efekta "Izjednačavanje visine stupca" koji održava naše stupce (i pozadine stupaca) jednake veličine. Da bismo to učinili, samo ćemo dodati nekoliko redaka CSS-a u naš stupac tako da se svi moduli u stupcu slože okomito, a zatim centriraju.
Vratimo se našoj liniji u prethodnom primjeru. Otvorite postavke redaka i uklonite sve prilagođene css datoteke koje imate tamo desnim klikom na prilagođeni CSS i klikom na "Poništi prilagođene CSS stilove".
Zatim dodajte sljedeći CSS u stupac 2, glavni element:
zaslon: flex; flex-smjer: stupac; justify-content: centar;
Ili, ako sam želio uskladiti sadržaj pri dnu, jednostavno zamijenimo "Opraviči sadržaj: centar" s "opravdavanje sadržaja: fleks-kraj".
Ono što je sjajno u vezi s ovom postavkom je da ako moj sadržaj bude centriran okomito i dosegne se širina retka, sadržaj ostaje centriran.
Napravite zamućenja (Sažetak) s različitim količinama vertikalno usklađenog teksta
Postavljanje sadržaja vašeg stupca okomito u središte također može biti korisno za reklamne oglase. Kao što znate, neće sve reklamacije sadržavati točnu količinu teksta korištenu za dpisati funkciju ili uslugu. Centriranje ovih reklama okomito može stvoriti prekrasan dizajn za vaš izgled.
U ovom ću primjeru vertikalno poravnati blurbove prema izgledu početne stranice Digital Payments.
Prvo ću dodati različite količine tjelesnog teksta u blurbs kako bih dao stvarniji prikaz kako web stranica može izgledati.
Sada moram prijeći na postavke linije i "Usklađivati visine stupaca".
Sada mogu dodati CSS isječke kako bi poravnali moj sadržaj i izmijenili dizajn.
Na kartici Napredno u postavkama redaka možemo vertikalno centrirati sadržaj naših stupaca dodavanjem sljedećeg pod Glavni element:
align-items: center; |
Ili ih promijenite tako da ih poravnate.
align-items: flex-end; |
Možete i resetirati svoje prilagođene CSS stilove i dodati sljedeće prilagođene margine da biste poravnali dno prvog stupca i treći poravnati vrh stupca.
CSS glavni element 1 stupca:
margin: auto auto 0; |
CSS glavni element 3 stupca:
margin: 0 auto auto; |
Što je s rasporedima s jednim stupcem?
Tehnički vam nije potreban CSS ili flex isječak za vertikalno centriranje sadržaja stupca. Sve što trebate jest osigurati jednake razmake iznad i ispod sadržaja (ili modula). Većinu vremena korisnici trebaju vertikalni sadržaj usredotočen na izglede s više stupaca jer žele da se susjedni sadržaj savršeno poravna.
To je sve za ovaj vodič koji vam pokazuje kako poravnati elemente u istoj liniji na Divi.
