Bài viết này trình bày cách căn chỉnh văn bản theo chiều dọc bên trong hộp linh hoạt:
Cách 1: Sử dụng Thuộc tính “align-item”
Để căn chỉnh văn bản theo chiều dọc, người dùng có thể sử dụng “ căn chỉnh mục ” thuộc tính do CSS cung cấp. Nó giúp các phần tử thiết lập sự liên kết của chúng bên trong flexbox. Các vị trí căn chỉnh theo chiều dọc có thể có tại “ đứng đầu ”, ở giữa ', hoặc ' đáy ' bên.
Các minh họa thực tế cho việc sắp xếp các yếu tố theo các hướng này được nêu dưới đây:
Ví dụ 1: Vị trí hàng đầu
Để căn chỉnh văn bản bên trong hộp linh hoạt ở vị trí trên cùng, nút “ khởi động linh hoạt ” giá trị được cung cấp cho “ sắp xếp các mục ' tài sản. Thuộc tính này được gán cho div chính sẽ được hiển thị dưới dạng flex. Giả sử, div với một lớp “ thẳng đứng ” được tạo trong tệp HTML. Sau đó, trong tệp CSS, chọn lớp đó và gán các thuộc tính sau:
.thẳng đứng {
màu sắc : trắng ;
chiều cao : 150px ;
trưng bày : uốn cong ;
đệm-trái : 20px ;
sắp xếp các mục : khởi động linh hoạt ;
màu nền : rừng xanh ;
}
- Đầu tiên, kiểu dáng và căn chỉnh cơ bản được cung cấp cho div bằng cách sử dụng các thuộc tính màu, màu nền và chiều cao của CSS.
- Thuộc tính “hiển thị” cũng được đặt thành “flex” để biến nó thành hộp linh hoạt.
- Cuối cùng, để hiển thị văn bản ở đầu flexbox, hãy đặt thuộc tính “align-items” thành “flex-start.
Sau khi thực thi đoạn mã trên, trang web trông như thế này:
Đầu ra hiển thị rằng văn bản hiện được căn chỉnh ở vị trí trên cùng bên trong hộp linh hoạt.
Ví dụ 2: Vị trí ở giữa
Để căn chỉnh văn bản theo chiều dọc ở vị trí giữa, hãy đặt “ trung tâm ” giá trị cho CSS “ sắp xếp các mục ' tài sản:
.thẳng đứng {màu sắc : trắng ;
chiều cao : 150px ;
trưng bày : uốn cong ;
đệm-trái : 20px ;
sắp xếp các mục : trung tâm ;
màu nền : rừng xanh ;
}
Sau khi thực thi đoạn mã trên:
Đầu ra ở trên hiển thị rằng văn bản hiện được căn chỉnh ở giữa hộp linh hoạt.
Ví dụ 3: Vị trí dưới cùng
Để đặt văn bản ở dưới cùng của hộp linh hoạt, hãy chỉ định “ kết thúc uốn cong ” giá trị cho “ sắp xếp các mục ' tài sản. Lần này văn bản được căn chỉnh tại vị trí kết thúc flexbox có nghĩa là ở phía dưới cùng:
.thẳng đứng {màu sắc : trắng ;
chiều cao : 150px ;
trưng bày : uốn cong ;
đệm-trái : 20px ;
sắp xếp các mục : kết thúc uốn cong ;
màu nền : rừng xanh ;
}
Sau khi thực thi đoạn mã trên, trang web trông như thế này:
Đầu ra ở trên hiển thị rằng văn bản hiện được căn chỉnh theo chiều dọc ở vị trí dưới cùng.
Cách 2: Sử dụng Thuộc tính “justify-content”
Các ' biện minh cho nội dung ” cũng có thể được sử dụng để căn chỉnh văn bản bên trong flexbox theo chiều dọc. Tuy nhiên, nó hoạt động giống như “ căn chỉnh văn bản ” và nó căn chỉnh các phần tử theo hướng hàng. Vì vậy, để thay đổi hướng căn chỉnh, “ hướng uốn ” tài sản được sử dụng để thiết lập “ biện minh cho nội dung ” liên kết với “ cột ' phương hướng:
.thẳng đứng {chiều cao : 150px ;
trưng bày : uốn cong ;
đệm-trái : 20px ;
màu sắc : trắng ;
màu nền : màu lục lam đậm ;
hướng uốn : cột ;
biện minh cho nội dung : kết thúc uốn cong ;
}
Giải thích của mã trên được cung cấp dưới đây:
- Các ' chiều cao ”, “ màu sắc ' Và ' đệm-trái ” thuộc tính hoạt động giống như phương pháp trên.
- Sau đó, đặt “ cột ” giá trị cho “ hướng uốn ” của flexbox để áp dụng các kiểu thông qua các cột.
- Sau đó, “ biện minh cho nội dung ” căn chỉnh văn bản theo chiều dọc.
- Cuối cùng, “ kết thúc uốn cong ” giá trị căn chỉnh phần tử trên “ đáy ' bên.
Ghi chú : Người dùng cũng có thể đặt “ khởi động linh hoạt ' Và ' trung tâm ” giá trị cho “ đứng đầu ', Và ' ở giữa ” bên, tương ứng.
Chẳng hạn, sau khi thực thi đoạn mã trên, trang web trông như thế này:
Đầu ra ở trên hiển thị rằng văn bản được căn chỉnh ở dưới cùng của hộp linh hoạt.
Phần kết luận
Để căn chỉnh theo chiều dọc văn bản bên trong hộp linh hoạt, nút “ sắp xếp các mục ' Và ' biện minh cho nội dung ” Thuộc tính CSS có thể được sử dụng. Cả hai thuộc tính này đều nhận được “ khởi động linh hoạt ”, “ trung tâm ' hoặc ' kết thúc uốn cong ” các giá trị để căn chỉnh văn bản tại “ đứng đầu ”, “ ở giữa ' Và ' đáy ” hướng bên trong flexbox, tương ứng. Bài viết này đã trình bày việc căn chỉnh dọc văn bản trong flexbox.