Khả năng sắp xếp theo chiều dọc nội dung khi tạo một trang web với Divi có thể là một bổ sung hữu ích cho công cụ thiết kế của bạn. Đôi khi một điều khoản nào đó yêu cầu nội dung được căn chỉnh theo chiều dọc theo nhiều cách khác nhau (giữa, dưới, trên). Nhu cầu phổ biến nhất là tập trung nội dung ngành dọc.

Nó cung cấp một liên lạc tuyệt vời về khoảng cách đối xứng rất hữu ích khi sử dụng nhiều bố cục cột cho nội dung của bạn. Ngoài ra, nội dung được căn giữa theo chiều dọc vẫn được tập trung ở các độ rộng trình duyệt khác nhau, loại bỏ rắc rối khi áp dụng đệm hoặc lề tùy chỉnh để đạt được khả năng phản hồi tương tự.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thêm một vài đoạn CSS nhỏ vào bất kỳ cột nào để căn chỉnh nội dung theo chiều dọc. Tôi sẽ sử dụng một số bố cục tạo sẵn từ Divi để biết ví dụ về cách thực hiện việc này. Nếu bạn không biết nhiều về CSS, bạn không phải lo lắng. Nó sẽ khá dễ dàng để áp dụng cho các bố cục của riêng bạn trong vài giây.

Hiểu Flex và Divi

Thuộc tính css Flex (hoặc Flexbox) chỉ đơn giản là một cách để định vị các mục trong các ngăn xếp ngang và / hoặc dọc (giống như một bảng). Ngoại trừ, không giống như các bảng truyền thống, thuộc tính flex cho phép bạn tạo các hộp sẽ điều chỉnh theo kích thước của nội dung mà nó chứa.

Divi sử dụng thuộc tính flex bất cứ khi nào bạn chọn "Cân bằng độ cao cột" làm tham số hàng. Điều này chỉ đơn giản là đảm bảo rằng kích thước cột của bạn sẽ điều chỉnh theo kích thước của cột có nhiều nội dung nhất. Và vì “Cân bằng độ cao cột” cho phép linh hoạt cho vùng chứa hàng, bạn có thể dễ dàng tận dụng lợi thế của nó bằng cách thêm css vào các cột của mình để điều chỉnh nội dung của từng cột (hoặc khu vực).

Ví dụ: nếu bạn thêm "margin: auto" vào một cột trong một hàng, nội dung của cột đó (cho dù đó là một hay nhiều mô-đun) sẽ được căn giữa theo chiều dọc.

Ngoài ra, nếu bạn thêm "align-items: centre" vào dòng của mình, tất cả các cột của bạn (và nội dung của chúng) sẽ được căn giữa theo chiều dọc.

Tất nhiên, có nhiều cách sử dụng khác cho thuộc tính Flex trong thiết kế web, cũng như CSS nâng cao hơn mà bạn có thể áp dụng cho chủ đề của mình. Nhưng đối với hướng dẫn này, tôi muốn giữ cho nó đơn giản.

Có thực sự cần thiết?

Về mặt kỹ thuật, không. Bạn có thể căn chỉnh nội dung / mô-đun của mình theo chiều dọc trong một cột bằng cách sử dụng khoảng cách tùy chỉnh (đệm và lề). Ví dụ: bạn có thể sử dụng các tùy chọn khoảng cách của Divi để cung cấp một cột bằng phần đệm trên cùng và dưới cùng để căn giữa (các) mô-đun theo chiều dọc trong cột. Bạn cũng có thể chỉ thêm phần đệm trên cùng vào một cột để căn chỉnh nội dung dưới cùng. Tuy nhiên, bạn có thể cần điều chỉnh khoảng cách khi cập nhật trang của mình với nhiều nội dung hơn. Ngoài ra, có thể khó duy trì sự liên kết này trên các chiều rộng trình duyệt khác nhau.

Vì vậy, nếu bạn đang tìm kiếm một giải pháp để căn chỉnh nội dung theo chiều dọc mà không cần phải suy nghĩ về khoảng cách tùy chỉnh, tôi nghĩ bạn sẽ thấy điều này hữu ích.

Hãy bắt đầu nào!

Tải bố cục được xác định trước trên trang của bạn

Để bắt đầu, tôi sẽ sử dụng bố cục từ phạm vi Danh mục công ty thiết kế nội thất. Để có được bố cục này trên trang của bạn, hãy tạo một trang mới. Sau đó đặt tiêu đề cho trang của bạn. Nhấp vào “Sử dụng Trình tạo Divi” rồi nhấp vào “Sử dụng Trình tạo trực quan”. Sau đó chọn tùy chọn "Chọn một bố cục cơ bản". Sau đó chọn bộ bố cục của Công ty Thiết kế Nội thất từ ​​cửa sổ bật lên Tải từ Thư viện. Cuối cùng, chọn trang Portfolio từ danh sách các bố cục và nhấp vào "Sử dụng bố cục này".

mẫu chủ đề divi wordpress.png

Khi bố cục được tải trên trang của bạn, bạn đã sẵn sàng để đi.

Phương pháp 1: Cách căn chỉnh theo chiều dọc nội dung bằng cách sử dụng lề linh hoạt và tự động

Mở cài đặt dòng cho dòng thứ hai của trang (dòng ngay bên dưới dòng có tiêu đề trang). Trong cài đặt thiết kế, hãy mở nhóm tùy chọn định cỡ và nhận thấy rằng “Cân bằng độ cao cột” đã hoạt động. Điều này có nghĩa là dòng bây giờ đã thêm thuộc tính flex (“display: flex;”).

hài hòa chiều cao của các cột.png

Bây giờ, hãy chuyển đến cài đặt của tab Nâng cao cho cùng một hàng và thêm đoạn mã css sau vào hộp nhập của phần tử chính của cột 2.

marginauto;

margin tự động divi.png

Bây giờ nội dung của cột thứ hai đã được di chuyển để được tập trung theo chiều dọc.

Đặt nội dung thấp hơn phù hợp

Nếu bạn muốn căn chỉnh nội dung của mình ở phía dưới để tất cả các mô-đun xếp chồng ở cuối cột, bạn có thể điều chỉnh giá trị lề như sau:

marginauto 0;

margin divi line.png

Căn chỉnh theo chiều dọc nội dung cho tất cả các cột trong hàng của bạn

Thay vì thêm "margin: auto" vào từng cột riêng lẻ, bạn cũng có thể căn giữa nội dung của tất cả các cột trong hàng của mình theo chiều dọc bằng cách thêm đoạn mã sau vào phần tử chính của cài đặt hàng.

align-items: center;

căn chỉnh các yếu tố divi.png

Hoặc nếu bạn muốn tất cả nội dung của các cột được căn chỉnh ở dưới cùng, bạn có thể thêm đoạn trích này:

align-items: flex-end;

Và đừng quên rằng bạn có thể tận dụng tính năng Kiểu mở rộng của Divi bằng cách nhấp chuột phải vào phần tử chính với đoạn CSS của bạn và nhấp vào "Mở rộng phần tử chính".

mở rộng phần tử chính.png

Sau đó, mở rộng phần tử css chính này cho tất cả các dòng của trang (hoặc phần) để căn giữa tất cả các nội dung của từng cột của trang.

mở rộng phong cách trên divi.png

Bây giờ mọi thứ đều tập trung theo chiều dọc.

sự xuất hiện của các thay đổi divi.png

Tuy nhiên, bạn có thể nhận thấy rằng màu nền của cột trắng không còn bao phủ toàn bộ chiều cao của hàng. Điều này là do chúng tôi đã thêm "margin: auto" vào cột. Để giải quyết vấn đề này, bạn có thể thay đổi màu nền của đường thành màu trắng và xóa phần tô màu khỏi đường. Nhưng thay vào đó, tôi sẽ chỉ cho bạn một cách để căn giữa nội dung cột của bạn mà không thay đổi lề.

Phương pháp 2: Căn chỉnh nội dung theo chiều dọc bằng cách sử dụng hướng uốn của cột

Trong phương pháp đầu tiên, chúng tôi đã tận dụng thuộc tính flex được thêm vào hàng. Điều này làm cho mỗi cột của chúng tôi trở thành một “hộp linh hoạt” có thể được căn chỉnh theo chiều dọc chỉ bằng cách điều chỉnh lề.

Nhưng cũng có một cách theo hướng linh hoạt để căn chỉnh nội dung cột của chúng tôi mà không làm mất hiệu ứng “Cân bằng chiều cao cột” giúp giữ cho các cột (và nền cột) có cùng kích thước. Để làm điều này, chúng tôi sẽ chỉ thêm một vài dòng CSS vào cột của chúng tôi để tất cả các mô-đun trong cột được xếp chồng lên nhau theo chiều dọc và sau đó được căn giữa.

Hãy quay trở lại dòng của chúng ta trong ví dụ trước. Mở cài đặt hàng và xóa mọi css tùy chỉnh mà bạn có thể có ở đó bằng cách nhấp chuột phải vào CSS tùy chỉnh và nhấp vào "Đặt lại kiểu CSS tùy chỉnh".

Sau đó thêm CSS sau vào cột 2, phần tử chính:

hiển thị: flex; flex-hướng: cột; justify-content: trung tâm;

Chỉ đạo flex-column.png

Hoặc, nếu tôi muốn căn chỉnh nội dung ở phía dưới, chỉ cần thay thế "Justify the content: centre" bằng "justify the content: flex-end".

flex alignment end.png

Điều tuyệt vời về thiết lập này là nếu nội dung của tôi được căn giữa theo chiều dọc và đạt đến chiều rộng của hàng, nội dung vẫn được căn giữa.

sự xuất hiện của boxes.png

Tạo các vệt mờ (Tóm tắt) với số lượng văn bản được sắp xếp theo chiều dọc khác nhau

Làm cho nội dung cột của bạn được căn giữa theo chiều dọc cũng có thể hữu ích cho các hiệu ứng làm mờ. Như bạn đã biết, không phải tất cả các ảnh mờ đều chứa lượng văn bản chính xác được sử dụng để dviết chức năng hoặc dịch vụ. Căn giữa các vệt mờ này theo chiều dọc có thể tạo ra một thiết kế đẹp cho bố cục của bạn.

Đối với ví dụ này, tôi sẽ căn chỉnh các ô mờ theo chiều dọc với bố cục trang chủ Thanh toán kỹ thuật số.

Trước tiên, tôi sẽ thêm các lượng văn bản nội dung khác nhau vào các ô mờ để trình bày thực tế hơn về diện mạo của một trang web.

liên kết blorbds.png

Bây giờ tôi phải đi đến cài đặt dòng và "Hài hòa chiều cao cột".

hài hòa cột.png

Bây giờ tôi có thể thêm đoạn mã CSS của mình để căn chỉnh nội dung của mình và sửa đổi thiết kế.

Trong tab Nâng cao của cài đặt hàng của bạn, chúng tôi có thể căn giữa nội dung của các cột theo chiều dọc bằng cách thêm phần sau vào Phần tử chính:

align-items: center;

Sửa đổi liên kết nội dung divi.png

Hoặc thay đổi nó bằng cách làm theo để xếp chúng xuống.

align-items: flex-end;

căn chỉnh ở đáy divi.png

Bạn cũng có thể đặt lại các kiểu CSS tùy chỉnh của mình và thêm các lề tùy chỉnh sau để căn chỉnh đáy cột đầu tiên và đỉnh cột được căn chỉnh thứ ba.

Phần tử chính CSS cột 1:

marginauto auto 0;

Phần tử chính CSS cột 3:

margin0 auto auto;

tùy chỉnh sự liên kết của tóm tắt divi.png

Điều gì về bố cục cột đơn?

Về mặt kỹ thuật, bạn không cần bất kỳ đoạn mã CSS hoặc flex nào để căn giữa nội dung cột của mình theo chiều dọc. Tất cả những gì bạn cần làm là đảm bảo rằng bạn có khoảng cách bằng nhau ở trên và dưới nội dung (hoặc mô-đun) của bạn. Hầu hết thời gian, người dùng cần nội dung dọc tập trung vào bố cục có nhiều cột vì họ muốn nội dung liền kề xếp hàng hoàn hảo.

Đó là tất cả cho hướng dẫn này cho bạn cách căn chỉnh các phần tử trên cùng một dòng trên Divi.