Khi xây dựng một trang web bằng Divi, tùy chọn căn chỉnh nội dung theo chiều dọc có thể là một bổ sung có giá trị cho bộ công cụ thiết kế của bạn. Tùy thuộc vào bố cục, nội dung có thể cần đượ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ài liệu của bạn phải được căn chỉnh theo chiều dọc. Nó bổ sung thêm một điểm nhấn đáng yêu về khoảng cách đối xứng cho nội dung của bạn, điều này rất hữu ích khi sử dụng bố cục nhiều cột. Hơn nữa, nội dung được căn giữa theo chiều dọc vẫn được căn giữa theo chiều rộng của trình duyệt, loại bỏ nhu cầu về phần đệm hoặc lề tùy chỉnh để đạt được khả năng phản hồi tương tự.
Trong bài học này, tôi sẽ hướng dẫn bạn cách căn chỉnh nội dung theo chiều dọc trong bất kỳ cột nào bằng cách sử dụng một vài dòng CSS đơn giản. Với mục đích trình diễn, tôi sẽ sử dụng một số bố cục đúc sẵn của Divi. Bạn không cần phải lo lắng nếu bạn chưa quen với CSS. Chỉ trong vài giây, bạn sẽ có thể áp dụng điều này vào thiết kế của mình.
- Hiểu sự khác biệt giữa Flex và Divi
- Điều này có bắt buộc không?
- Thêm bố cục được cấu hình sẵn vào trang của bạn.
- Phương pháp 1: Căn chỉnh nội dung theo chiều dọc với Flex và Auto Margin
- Căn chỉnh nội dung ở phía dưới
- Căn chỉnh nội dung theo chiều dọc cho các cột trong hàng của bạn
- 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 Flex của cột
- Thế còn bố cục chỉ có một cột thì sao?
- Suy nghĩ cuối cùng về sự sắp xếp theo chiều dọc và chiều ngang của DIVI
Hiểu sự khác biệt giữa Flex và Divi
Thuộc tính CSS Flex (hoặc Flexbox) chỉ là một phương tiện để sắp xếp các mục theo ngăn xếp ngang và dọc (giống như một cái bàn). Tuy nhiên, không giống như các bảng thông thường, tính năng linh hoạt cho phép bạn xây dựng các hộp “uốn cong” theo kích thước của nội dung chứa trong đó.
Divi sử dụng thuộc tính flex khi bạn chọn “Cân bằng độ cao cột” làm cài đặt hàng của mình. Nói một cách đơn giản, điều này đảm bảo rằng kích thước của tất cả các cột của bạn sẽ điều chỉnh theo kích thước của cột có nhiều thông tin nhất. Bởi vì “Cân bằng độ cao cột” kích hoạt tính linh hoạt cho vùng chứa hàng, bạn có thể tận dụng nó bằng cách thêm CSS vào các cột của mình để thay đổi nội dung của từng cột (hoặc hộp).
Ví amp : nếu bạn thêm “margin: auto” vào bất kỳ cột nào trong một hàng, thì nội dung của cột đó (cho dù đó là một hoặc một số mô-đun) sẽ được căn giữa theo chiều dọc.
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 nếu bạn thêm “align-items: center;” đến hàng của bạn.
Tất nhiên, thuộc tính flex có nhiều ứng dụng hơn trong thiết kế web và CSS nâng cao hơn mà bạn có thể sử dụng trong chủ đề của mình. Tuy nhiên, tôi muốn giữ mọi thứ đơn giản cho hướng dẫn này.
Điều này có bắt buộc không?
Về mặt kỹ thuật, không. Bạn có thể sử dụng khoảng cách tùy chỉnh để định vị nội dung/mô-đun của mình theo chiều dọc trong một cột (phần đệm và lề). Ví amp : bạn có thể sử dụng các tùy chọn giãn cách của Divi để căn giữa (các) mô-đun theo chiều dọc trong hàng đợi để tạo khoảng đệm trên và dưới cho cột bằng nhau. Bạn cũng có thể căn chỉnh nội dung ở dưới cùng bằng cách thêm phần đệm trên cùng vào một cột. Khi thêm nhiều nội dung hơn vào trang của bạn, bạn có thể cần sửa đổi khoảng cách. Hơn nữa, việc duy trì sự liên kết này trên nhiều kích thước trình duyệt có thể có vấn đề.
Vì vậy, nếu bạn đang tìm cách sắp xếp thông tin theo chiều dọc mà không phải lo lắng về khoảng cách cụ thể, tôi nghĩ bạn sẽ thấy điều này có lợi.
Hãy bắt đầu bữa tiệc nào!
Thêm bố cục được cấu hình sẵn vào trang của bạn.
Tôi sẽ bắt đầu với Bố cục trang danh mục đầu tư của Công ty Thiết kế Nội thất. Tạo một trang mới để có bố cục này trên trang của bạn. Sau đó, đặt tên cho trang của bạn. Chọn “Sử dụng Divi Builder” rồi chọn “Sử dụng Visual Builder” từ menu thả xuống. Sau đó chọn “Chọn bố cục tạo sẵn” từ menu thả xuống. Sau đó, chọn Gói bố cục công ty thiết kế nội thất từ cửa sổ Tải từ thư viện. Cuối cùng, từ việc chọn bố cục, hãy chọn trang Danh mục đầu tư và nhấp vào “Sử dụng bố cục này”.
Bạn đã sẵn sàng bắt đầu sau khi bố cục được tải trên trang của bạn.
Phương pháp 1: Căn chỉnh nội dung theo chiều dọc với Flex và Auto Margin
Mở cài đặt hàng cho hàng thứ hai (hàng ngay dưới hàng có tiêu đề trang). Chuyển đổi mở nhóm tùy chọn Định cỡ trong các tùy chọn thiết kế và lưu ý rằng “Cân bằng độ cao cột” đã hoạt động; Điều này biểu thị rằng thuộc tính flex (“display: flex;”) đã được thêm vào hàng.
Trong hộp nhập Phần tử chính của Cột 2, hãy chuyển đến cài đặt tab Nâng cao cho cùng một hàng và thêm đoạn mã CSS sau.
Nội dung của cột thứ hai hiện đã được chuyển sang căn giữa theo chiều dọc.
| 01 | lề: tự động; |
Căn chỉnh nội dung ở phía dưới
Bạn có thể thay đổi giá trị lề như sau để làm cho nội dung của bạn được căn chỉnh ở dưới cùng sao cho tất cả các mô-đun xếp chồng lên nhau ở cuối cột:
| 01 | lề: tự động 0; |
Căn chỉnh nội dung theo chiều dọc cho các cột trong hàng của bạn
Bạn có thể căn giữa nội dung của tất cả các cột trong hàng theo chiều dọc bằng cách thêm đoạn mã sau vào thành phần chính của cài đặt hàng, thay vì thêm “lề: tự động” vào từng cột riêng lẻ.
| 01 | căn chỉnh các mục: giữa; |
Bạn cũng có thể sử dụng đoạn mã này nếu bạn muốn tất cả thông tin trong các cột của mình được căn chỉnh ở phía dưới:
| 01 | căn chỉnh các mục: flex-end; |
Hãy nhớ rằng bạn có thể sử dụng tính năng Mở rộng kiểu của Divi bằng cách nhấp chuột phải vào thành phần chính bằng đoạn mã CSS của bạn và chọn “Mở rộng thành phần chính”.
Sau đó, để căn giữa theo chiều dọc tất cả nội dung của mỗi cột trên trang, hãy áp dụng CSS phần tử chính cho tất cả các hàng trên toàn bộ trang (hoặc phần).
Mọi thứ bây giờ đã được cân bằng theo chiều dọc.
Tuy nhiên, bạn có thể nhận thấy rằng màu nền của cột màu trắng không còn bao phủ toàn bộ hàng do cột có thêm “margin: auto”. Bạn có thể khắc phục điều này bằng cách thay đổi màu nền của hàng thành màu trắng và xóa phần đệm hàng. Thay vào đó, tôi sẽ hướng dẫn bạn cách căn giữa nội dung cột mà không cần phải 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 Flex của cột
Chúng tôi đã sử dụng thuộc tính flex lần đầu tiên được thêm vào hàng. Kết quả là 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 bằng cách thay đổi lề.
Tuy nhiên, chúng ta có thể sử dụng flex-direction để căn chỉnh văn bản của cột mà không phải hy sinh 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ủa chúng ta có cùng kích thước. Để thực hiện điều này, chúng tôi sẽ thêm một vài dòng CSS vào hàng đợi của mình, khiến tất cả các mô-đun bên trong nó đượ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 hàng amp dụ trước. Bằng cách nhấp chuột phải vào CSS tùy chỉnh và chọn “Đặt lại kiểu CSS tùy chỉnh”, bạn có thể xóa bất kỳ CSS tùy chỉnh nào bạn có thể có trong Cài đặt hàng.
Sau đó, trong Phần tử chính của Cột 2, hãy áp dụng CSS sau:
| 010203 | hiển thị: flex;flex-direction: cột;justify-content: center; |
Thay đổi “justify-content: center” thành “justify-content: flex-end” để căn chỉnh nội dung ở dưới cùng.
Tôi thích cấu hình này vì nếu tôi định vị nội dung của mình theo chiều dọc và làm cho hàng có chiều rộng tối đa thì nội dung vẫn được căn giữa.
Tạo các đường viền được căn chỉnh theo chiều dọc với số lượng văn bản khác nhau
Việc căn giữa nội dung của các cột theo chiều dọc cũng có thể giúp ích cho việc trình bày nội dung. Như bạn có thể biết, không phải mọi lời giới thiệu đều có cùng lượng văn bản để mô tả một tính năng hoặc dịch vụ. Việc đặt những vệt mờ này ở giữa theo chiều dọc có thể giúp bố cục của bạn trông đẹp mắt.
Đối với Bố cục Trang chủ Thanh toán Kỹ thuật số, tôi sẽ căn chỉnh các phần giới thiệu theo chiều dọc cho amp này.
Để tạo ra sự mô tả chân thực hơn về giao diện của trang web, trước tiên tôi sẽ thêm lượng nội dung nội dung khác nhau vào phần giới thiệu.
Bây giờ tôi cần “Cân bằng độ cao cột” trong cài đặt hàng.
Bây giờ tôi có thể căn chỉnh văn bản của mình và điều chỉnh thiết kế bằng đoạn mã CSS.
Chúng ta có thể căn giữa nội dung các cột theo chiều dọc bằng cách thêm phần sau vào phần Thành phần chính của tab Nâng cao trong Cài đặt hàng:
| 01 | căn chỉnh các mục: giữa; |
Vui lòng thay đổi nó thành như sau để căn chỉnh chúng ở phía dưới.
| 01 | căn chỉnh các mục: flex-end; |
Bạn cũng có thể làm cho cột đầu tiên được căn chỉnh dưới cùng và cột thứ ba được căn chỉnh trên cùng bằng cách đặt lại các kiểu CSS tùy chỉnh của bạn và thêm các lề tùy chỉnh sau.
Cột 1 CSS thành phần chính:
| 01 | lề: tự động tự động 0; |
Cột 3 CSS thành phần chính:
| 01 | lề: 0 tự động tự động; |
Thế còn bố cục chỉ có một cột thì sao?
Bạn không cần đoạn mã CSS hoặc linh hoạt để căn giữa nội dung một cột theo chiều dọc. Tất cả những gì bạn phải làm là đảm bảo văn bản của bạn có khoảng cách bằng nhau ở trên và dưới (hoặc mô-đun). Hầu hết người tiêu dùng yêu cầu nội dung được căn giữa theo chiều dọc trên các bố cục có nhiều cột vì họ muốn các tài liệu liền kề được sắp xếp chính xác.
Suy nghĩ cuối cùng về sự sắp xếp theo chiều dọc và chiều ngang của DIVI
Mặc dù giải pháp này dựa trên một vài đoạn CSS tùy chỉnh nhỏ, nhưng tôi cảm thấy nó có thể hữu ích cho những người đang tìm kiếm giải pháp nhanh chóng cho một quy trình tốn nhiều thời gian. Vui lòng chia sẻ ý kiến của bạn về phương pháp này cũng như các bài học amp về việc nó đã giúp bạn tiết kiệm thời gian và công sức như thế nào trong quá khứ.
Cảm ơn đã giải thích rõ ràng. Tuy nhiên, điều này không hoạt động với mô-đun Blog. Sau đó chỉ có 1 cột trong hàng. Số lượng blog cạnh nhau được xác định bởi mô-đun (mặc định 3). Các cột ở đây cũng có thể được làm giống nhau phải không?
Xin chào, Không, tôi xin lỗi, nó chỉ dành cho các cột DIVI cổ điển, mô-đun blog DIVI có một mã hoàn toàn khác để căn chỉnh các cột.
Điều gì sẽ xảy ra nếu bạn muốn mô-đun được căn chỉnh 2/3 giây từ trên xuống hoặc 1/3 từ trên xuống – và không hoàn hảo ở giữa trên cùng hoặc dưới cùng?
Xin chào, tôi e rằng nó sẽ yêu cầu thực hiện một số CSS tùy chỉnh, theo mặc định không có tùy chọn nào như vậy.
Có thể bạn có thể thử căn chỉnh nội dung ở giữa và thêm một số phần đệm vào nội dung của mình nhưng vui lòng kiểm tra cẩn thận quá trình hiển thị trên tất cả các thiết bị.