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 (căn giữa, dưới cùng, trên cùng). Nhu cầu phổ biến nhất là để vật liệu của bạn được căn chỉnh theo chiều dọc. Nó thêm một nét đáng yêu của khoảng cách đối xứng vào nội dung của bạn, điều này rất hữu ích khi sử dụng nhiều bố cục 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ẽ dạy 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 không quen với CSS. 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
- Cái này có bắt buộc không?
- Thêm bố cục được định cấu hình trước vào trang của bạn.
- Phương pháp 1: Căn chỉnh theo chiều dọc nội dung với lề linh hoạt và tự động
- Căn chỉnh nội dung ở dưới cùng
- Căn chỉnh nội dung theo chiều dọc cho các cột của 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 linh hoạt của cột
- Còn về bố cục chỉ có một cột?
- Những suy nghĩ cuối cùng về căn chỉnh 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 trong các 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 flex cho phép bạn tạo các hộp “uốn” theo kích thước của nội dung chúng chứa.
Divi sử dụng thuộc tính flex khi bạn chọn “Cân bằng độ cao của 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 điều chỉnh theo kích thước của cột có nhiều thông tin nhất. Vì “Cân bằng độ cao của cột” kích hoạt độ linh hoạt cho vùng chứa hàng, bạn có thể sử 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 mỗi cột (hoặc hộp).
Nếu bạn thêm “margin: auto” vào bất kỳ cột nào trong một hàng, đối với ex amp le, nội dung của cột đó (cho dù đó là một hay 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.
Cái này có bắt buộc không?
Theo nghĩa 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ề). Đối với ex amp le, bạn có thể sử dụng các tùy chọn khoảng cách của Divi để căn giữa (các) mô-đun theo chiều dọc trong hàng đợi để tạo cho cột có phần đệm trên và dưới bằng nhau. Bạn cũng có thể căn chỉnh nội dung 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 phải 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 kiếm một 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 định cấu hình trước vào trang của bạn.
Tôi sẽ bắt đầu với Bố cục Trang Danh mục 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 Trình tạo Divi” và sau đó “Sử dụng Trình tạo trực quan” từ trình đơn thả xuống. Sau đó chọn “Chọn một 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 đã tải trên trang của bạn.
Phương pháp 1: Căn chỉnh theo chiều dọc nội dung với lề linh hoạt và tự động
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 có nghĩa là thuộc tính flex (“display: flex;”) đã được thêm vào hàng.
Trong hộp nhập Yếu 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 di dời để căn giữa theo chiều dọc.
| 01 | margin: tự động; |
Căn chỉnh nội dung ở dưới cùng
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 để tất cả các mô-đun xếp chồng lên nhau ở cuối cột của bạn:
| 01 | margin: auto 0; |
Căn chỉnh nội dung theo chiều dọc cho các cột của 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 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, thay vì thêm “margin: auto” vào từng cột riêng lẻ.
| 01 | align-items: trung tâm; |
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 ở dưới cùng:
| 01 | align-items: flex-end; |
Hãy nhớ rằng bạn có thể sử 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 mã CSS của bạn và chọn “Mở rộng phần tử 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 trong 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 trắng không còn bao phủ toàn bộ hàng do cột được bổ sung 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ẽ dạy bạn cách căn giữa nội dung của 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 linh hoạt của cột
Chúng tôi đã sử dụng thuộc tính flex trước 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 hướng linh hoạt để 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”, điều này giữ cho các cột của chúng ta (và nền cột) 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 chúng tôi, làm cho 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 ex amp le’s 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ó 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 | display: flex; flex-direction: column; justify-content: center; |
Thay đổi “justify-content: center” thành “justify-content: flex-end” để căn chỉnh nội dung.
Tôi thích cấu hình này bởi vì nếu tôi định vị nội dung của mình theo chiều dọc và đặt toàn bộ chiều rộng của hàng, thì nội dung vẫn được căn giữa.
Tạo các vệt mờ được căn chỉnh theo chiều dọc với nhiều lượng văn bản khác nhau
Làm cho nội dung của các cột của bạn được căn giữa theo chiều dọc cũng có thể giúp làm mờ. Như bạn có thể biết, không phải mọi thông tin nổi bật sẽ có cùng một lượng văn bản để mô tả một tính năng hoặc dịch vụ. Làm cho những điểm mờ này được căn 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 Thanh toán Digital Home Page Layout, tôi sẽ theo chiều dọc align blurbs cho điều này cũ amp le.
Để tạo ra một mô tả chân thực hơn về diện mạo của một trang web, trước tiên tôi sẽ thêm các lượng nội dung cơ thể khác nhau vào các hiệu ứng mờ.
Bây giờ tôi cần “Cân bằng độ cao của 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 cách sử dụng các đoạn CSS.
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 Thành phần Chính của tab Nâng cao trong Cài đặt Hàng của chúng tôi:
| 01 | align-items: trung tâm; |
Vui lòng thay đổi nó thành như sau để căn chỉnh chúng ở dưới cùng.
| 01 | align-items: flex-end; |
Bạn cũng có thể làm cho cột đầu tiên căn dưới cùng và cột thứ ba căn 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 yếu tố chính:
| 01 | margin: auto tự động 0; |
Cột 3 CSS yếu tố chính:
| 01 | margin: 0 auto tự động; |
Còn về bố cục chỉ có một cột?
Bạn không cần đoạn mã CSS hoặc phần linh hoạt để lấy nội dung một cột của mình căn giữa 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 cá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 bố cục có nhiều cột vì họ muốn vật liệu liền kề được xếp hàng chính xác.
Những suy nghĩ cuối cùng về căn chỉnh theo chiều dọc và chiều ngang của DIVI
Mặc dù giải pháp này dựa vào một vài đoạn mã nhỏ của CSS tùy chỉ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 cách chữa trị nhanh chóng cho một thủ tục tốn thời gian. Xin vui lòng để chia sẻ ý kiến của bạn về phương pháp này, cũng như cựu amp les như thế nào nó đã tiết kiệm được thời gian và nỗ lực trong quá khứ.
Bedankt voor de duidelijke uitleg. Bij een Blog module werkt dit echter niet. Dan is er in row maar 1 kolom. Het aantal blog naast elkaar là bepaald door de module (mặc định 3). Zijn hier de kolommen ook gelijk te maken?
Xin chào, Không, tôi xin lỗi vì 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 theo chiều 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 như vậy.
Có thể bạn có thể cố gắng 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 hãy kiểm tra kỹ cách hiển thị trên tất cả các thiết bị.