Một văn bản có thể được thêm dễ dàng ở bất cứ đâu, nhưng nếu không có sự liên kết, nó có thể trông không thể hiện được và kém hấp dẫn hơn. Văn bản không được đánh dấu cũng có thể làm xáo trộn toàn bộ giao diện của một trang web. Để giải quyết những điều như vậy trong các ứng dụng web, chúng tôi có thể sử dụng một số thuộc tính hữu ích của CSS sẽ giúp bạn căn chỉnh văn bản nhanh chóng.
Bài viết này sẽ trình bày cách căn chỉnh văn bản theo chiều dọc trong CSS.
Làm thế nào để căn chỉnh văn bản theo chiều dọc trong CSS?
Trong CSS, bạn có thể sử dụng các thuộc tính dưới đây để căn chỉnh văn bản theo chiều dọc:
-
- thuộc tính line-height
- thuộc tính hiển thị và căn chỉnh các mục
Bây giờ, chúng ta hãy xem xét từng phương pháp một!
Phương pháp 1: Sử dụng thuộc tính line-height để căn chỉnh văn bản theo chiều dọc trong CSS
Các ' chiều cao giữa các dòng ”Thuộc tính chỉ định khu vực bên dưới và các phần tử nội tuyến hướng lên. Nó đặt khoảng cách của một văn bản so với các mục khác. Sử dụng thuộc tính chiều cao dòng, văn bản có thể dễ dàng được căn chỉnh theo chiều dọc ở giữa.
Thí dụ
Đây là một văn bản bên trong một hộp (đường viền) hiện nằm ở phía trên bên trái. Hãy căn chỉnh văn bản này vào giữa theo chiều dọc và chiều ngang:
Bây giờ chúng ta hãy chuyển sang phương pháp tiếp theo. “ Flexbox ”Là bố cục một chiều cho phép bạn định dạng HTML. Bạn cũng có thể sử dụng nó để căn chỉnh các mục theo chiều dọc hoặc chiều ngang. Vì vậy, hãy lấy một ví dụ và căn chỉnh văn bản theo chiều dọc với sự trợ giúp của hộp linh hoạt. Thí dụ Trước hết, chúng tôi sẽ làm cho vùng chứa của mình linh hoạt bằng cách đặt giá trị của “ trưng bày 'Thuộc tính' uốn cong ”. Tiếp theo, sử dụng “ căn chỉnh các mặt hàng ”Để đặt nội dung ở trung tâm theo chiều dọc. Hơn nữa, để căn chỉnh nội dung ở trung tâm theo chiều ngang, “ biện minh-nội dung ”Tài sản sẽ được sử dụng: Trong CSS, văn bản có thể dễ dàng căn chỉnh theo chiều dọc với sự trợ giúp của “ chiều cao giữa các dòng ' tài sản. Bạn cũng có thể sử dụng “ flexbox 'Để căn chỉnh theo chiều dọc của văn bản với' trưng bày ' và ' căn chỉnh các mặt hàng ' đặc tính. Flexbox là một bố cục một chiều và được sử dụng đơn giản để căn chỉnh theo chiều dọc hoặc chiều ngang của các mục. Bài đăng này cung cấp hai phương pháp đơn giản nhất có thể giúp bạn căn chỉnh văn bản theo chiều dọc trong CSS.
Để làm như vậy, hãy thêm một vùng chứa “
Trang web giáo dục tốt nhất !
div >
Hộp được hình thành bằng cách sử dụng “ 3px 'Biên giới và' 250px ' Chiều cao. Các ' cỡ chữ Thuộc tính 'được sử dụng với giá trị' 24px ”Để hiển thị phông chữ. Chúng tôi sẽ gán div một “ chiều cao giữa các dòng ' của ' 250px ”Để căn chỉnh văn bản của nó theo chiều dọc ở giữa. Tiếp theo, chúng tôi sẽ sử dụng “ căn chỉnh văn bản Thuộc tính ”để căn chỉnh văn bản ở trung tâm:
chiều cao dòng: 250px;
text-align: center;
font-size: 24px;
chiều cao: 250px;
border: 3px solid;
}
Như bạn có thể thấy, văn bản đã được căn chỉnh theo chiều dọc đến trung tâm bằng cách sử dụng chiều cao dòng và theo chiều ngang đối với trung tâm với thuộc tính text-align. Phương pháp 2: Sử dụng Thuộc tính display và align-items để Căn chỉnh văn bản theo chiều dọc trong CSS
trưng bày: uốn cong ;
align-các mục: trung tâm;
justify-content: trung tâm;
font-size: 24px;
chiều cao: 200px;
border: 3px solid;
}
Văn bản được chỉ định đã được căn chỉnh vào giữa thành công:
Chúng tôi đã cung cấp các phương pháp liên quan đến căn chỉnh văn bản theo chiều dọc trong CSS. Sự kết luận