Możliwość wyrównania w pionie treść podczas tworzenia witryny za pomocą Divi może być przydatnym dodatkiem do Twojego narzędzia do projektowania. Czasami określony przepis wymaga, aby treść jest wyrównany w pionie na różne sposoby (pośrodku, u dołu, u góry). Najczęstszą potrzebą jest wyśrodkowanie treść pionowo.
Zapewnia pyszny dotyk symetrycznych odstępów, który przydaje się, gdy używasz wielu układów kolumn do treści. Ponadto zawartość wyśrodkowana w pionie pozostaje wyśrodkowana przy różnych szerokościach przeglądarki, co eliminuje kłopoty związane z zastosowaniem niestandardowego dopełnienia lub marginesów w celu uzyskania podobnej szybkości reakcji.
W tym samouczku pokażę, jak dodać kilka małych fragmentów kodu CSS do dowolnej kolumny, aby wyrównać zawartość w pionie. Wykorzystam niektóre z gotowych układów z Divi po przykłady, jak to zrobić. Jeśli nie wiesz zbyt wiele o CSS, nie musisz się martwić. W ciągu kilku sekund łatwo będzie zastosować go do własnych układów.
Zrozumienie Flex i Divi
Właściwość css Flex (lub Flexbox) to po prostu sposób na pozycjonowanie elementów w stosach poziomych i / lub pionowych (podobnie jak tabela). Z wyjątkiem w przeciwieństwie do tradycyjnych tabel, właściwość flex umożliwia tworzenie pudełek, które będą dostosowywać się do rozmiaru zawartej w nich zawartości.
Divi używa właściwości flex za każdym razem, gdy jako parametr wiersza wybierzesz opcję „Wyrównaj wysokość kolumn”. To po prostu gwarantuje, że rozmiar kolumn dostosuje się do rozmiaru kolumny zawierającej najwięcej treści. A ponieważ opcja „Wyrównaj wysokość kolumn” umożliwia elastyczność kontenera wierszy, możesz łatwo z niej skorzystać, dodając css do kolumn, aby dostosować zawartość każdej kolumny (lub obszaru).
Na przykład, jeśli dodasz „margin: auto” do kolumny w wierszu, zawartość tej kolumny (niezależnie od tego, czy jest to jeden, czy więcej modułów) zostanie wyśrodkowana w pionie.
Ponadto, jeśli dodasz do linii „wyrównanie elementów: wyśrodkuj”, wszystkie kolumny (i ich zawartość) zostaną wyśrodkowane pionowo.
Oczywiście istnieje wiele innych zastosowań właściwości Flex w projektowaniu stron internetowych, a także bardziej zaawansowane CSS, które można zastosować do motywu. Ale w tym samouczku chciałem, aby to było proste.
Czy to naprawdę konieczne?
Technicznie nie. Możesz wyrównać zawartość / moduły w kolumnie w pionie, używając niestandardowych odstępów (dopełnienie i marginesy). Na przykład możesz użyć opcji odstępów Divi, aby nadać kolumnie równe górnemu i dolnemu wypełnieniu, aby wyśrodkować moduły pionowo w kolumnie. Możesz również dodać tylko górne wypełnienie do kolumny, aby wyrównać dolną zawartość. Jednak może być konieczne dostosowanie odstępów podczas aktualizowania strony o więcej treści. Ponadto utrzymanie tego wyrównania dla różnych szerokości przeglądarek może być trudne.
Więc jeśli szukasz rozwiązania do wyrównywania zawartości w pionie bez konieczności myślenia o niestandardowych odstępach, myślę, że okaże się to przydatne.
Zacznijmy!
Załaduj wstępnie zdefiniowany układ na swoją stronę
Na początek użyję układu z portfolio firmy zajmującej się projektowaniem wnętrz. Aby umieścić ten układ na swojej stronie, utwórz nową stronę. Następnie nadaj swojej stronie tytuł. Kliknij „Użyj Divi Builder”, a następnie „Użyj Visual Builder”. Następnie wybierz opcję „Wybierz podstawowy układ”. Następnie wybierz zestaw układu firmy Interior Design Company z wyskakującego okna Wczytaj z biblioteki. Na koniec wybierz stronę Portfolio z listy układów i kliknij „Użyj tego układu”.
Po załadowaniu układu na stronę możesz rozpocząć pracę.
Metoda 1: Jak wyrównać zawartość w pionie za pomocą opcji Flex i Auto Margin
Otwórz ustawienia linii dla drugiego wiersza strony (bezpośrednio pod wierszem z tytułem strony). W obszarze Ustawienia projektu otwórz grupę opcji wymiarowania i zwróć uwagę, że opcja „Wyrównaj wysokości kolumn” jest już aktywna. Oznacza to, że do linii dodano teraz właściwość flex („display: flex;”).
Teraz przejdź do ustawień zakładki Zaawansowane dla tego samego wiersza i dodaj następujący fragment css pod polem wprowadzania głównego elementu kolumny 2.
margin: auto; |
Teraz zawartość drugiej kolumny została przesunięta, aby była wyśrodkowana pionowo.
Dopasuj niższą zawartość
Jeśli chcesz wyrównać zawartość na dole, tak aby wszystkie moduły układały się na dole kolumny, możesz dostosować wartość marginesu w następujący sposób:
margin: auto 0; |
Pionowe wyrównanie zawartości dla wszystkich kolumn w twoim wierszu
Zamiast dodawać „margin: auto” do każdej kolumny z osobna, możesz także wyśrodkować w pionie zawartość wszystkich kolumn w wierszu, dodając następujący fragment do głównego elementu ustawień wiersza.
align-items: center; |
Lub jeśli chcesz, aby cała zawartość kolumn była wyrównana u dołu, możesz dodać ten fragment:
align-items: flex-end; |
I nie zapominaj, że możesz skorzystać z funkcji rozszerzania stylów Divi, klikając prawym przyciskiem myszy główny element z fragmentem kodu CSS i klikając „Rozszerz główny element”.
Następnie rozciągnij ten główny element css na wszystkie linie strony (lub sekcji), aby pionowo wyśrodkować całą zawartość każdej kolumny strony.
Teraz wszystko jest wyśrodkowane pionowo.
Ale być może zauważyłeś, że kolor tła białej kolumny nie obejmuje już całej wysokości wiersza. Dzieje się tak, ponieważ dodaliśmy do kolumny „margin: auto”. Aby rozwiązać ten problem, możesz zmienić kolor tła linii na biały i usunąć wypełnienie z linii. Zamiast tego pokażę Ci sposób wyśrodkowania zawartości kolumny bez zmiany marginesu.
Metoda 2: Wyrównaj zawartość w pionie, używając kierunku wygięcia kolumny
W pierwszej metodzie wykorzystaliśmy właściwość flex dodaną do wiersza. Dzięki temu każda z naszych kolumn stała się „elastycznym pudełkiem”, które można wyrównać w pionie, po prostu dostosowując margines.
Ale istnieje również sposób na wyrównywanie zawartości naszych kolumn w elastycznym kierunku bez utraty efektu „Wyrównaj wysokość kolumny”, który utrzymuje nasze kolumny (i tła kolumn) w tym samym rozmiarze. Aby to zrobić, po prostu dodamy kilka wierszy CSS do naszej kolumny, tak aby wszystkie moduły w kolumnie były ułożone pionowo, a następnie wyśrodkowane.
Wróćmy do naszej linii z poprzedniego przykładu. Otwórz ustawienia wiersza i usuń wszelkie niestandardowe pliki CSS, które możesz tam mieć, klikając prawym przyciskiem myszy niestandardowy CSS i klikając „Zresetuj niestandardowe style CSS”.
Następnie dodaj następujący CSS w kolumnie 2, główny element:
wyświetlacz: elastyczny; flex-direction: kolumna; justify-content: center;
Lub, jeśli chcę wyrównać zawartość na dole, po prostu zastąp „Justify the content: center” na „justify content: flex-end”.
Wspaniałe w tej konfiguracji jest to, że jeśli moja treść jest wyśrodkowana w pionie, a szerokość wiersza zostanie osiągnięta, zawartość pozostaje wyśrodkowana.
Zrób blampery (Podsumowanie) z różnymi ilościami wyrównanego pionowo tekstu
Wyśrodkowanie zawartości kolumny w pionie może być również przydatne w przypadku notatek. Jak wiecie, nie wszystkie notki będą zawierać dokładną ilość tekstu użytego do dnapisać funkcja lub usługa. Wyśrodkowanie tych notatek w pionie może stworzyć piękny projekt układu.
W tym przykładzie wyrównuję w pionie notki do układu strony głównej Digital Payments.
Najpierw dodam różne ilości tekstu podstawowego do notatek, aby uzyskać bardziej realistyczną reprezentację tego, jak może wyglądać witryna.
Teraz muszę przejść do ustawień linii i „Zharmonizować wysokości kolumn”.
Teraz mogę dodać moje fragmenty kodu CSS, aby wyrównać moją zawartość i zmodyfikować projekt.
Na karcie Zaawansowane w ustawieniach wierszy możemy wyśrodkować w pionie zawartość naszych kolumn, dodając następujące elementy w obszarze Główny element:
align-items: center; |
Lub zmień go, wykonując następujące czynności, aby je zmniejszyć.
align-items: flex-end; |
Możesz także zresetować niestandardowe style CSS i dodać następujące niestandardowe marginesy, aby wyrównać dół pierwszej kolumny i trzeci wyrównany górę kolumny.
Główny element CSS kolumny 1:
margin: auto auto 0; |
Główny element CSS kolumny 3:
margin: 0 auto auto; |
A co z układami jednokolumnowymi?
Z technicznego punktu widzenia nie potrzebujesz kodu CSS ani fragmentu kodu flex, aby wyśrodkować zawartość kolumny w pionie. Wszystko, co musisz zrobić, to upewnić się, że nad i pod treścią (lub modułami) są równe odstępy. W większości przypadków użytkownicy potrzebują zawartości pionowej wyśrodkowanej na układach z wieloma kolumnami, ponieważ chcą, aby sąsiednia treść była idealnie wyrównana.
To wszystko w tym samouczku, który pokazuje, jak wyrównać elementy w tej samej linii w Divi.
