Hướng dẫn align in html - căn lề trong html
Show Định nghĩa và sử dụngThuộc tính text-align sắp xếp các nội dung theo chiều ngang. Cấu trúc
tag {
text-align: giá trị;
}Với giá trị như sau:
HTML viết:
Hiển thị trình duyệt khi chưa có CSS:Canh trái Canh giữa Canh phải CSS viết:p.alignLeft {
text-align: left;
}
p.alignCenter {
text-align: center;
}
p.alignRight {
text-align: right;
}Hiển thị trình duyệt khi có CSS:Canh trái Canh giữa Canh phải CSS viết:Hiển thị trình duyệt khi có CSS: Trình duyệt hỗ trợ
Định nghĩa và sử dụngThuộc tính vertical-align sắp xếp các nội dung theo chiều dọc. Cấu trúctag {
vertical-align: giá trị;
}Với giá trị như sau:
HTML viết:
Hiển thị trình duyệt khi chưa có CSS:CSS viết:p span {
vertical-align: super;
}Hiển thị trình duyệt khi có CSS:Trình duyệt hỗ trợThuộc tính vertical-align được hỗ trợ trong đa số các trình duyệt. Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype Trong thiết kế web, các chi tiết quan trọng. Màu sắc, biểu tượng và kiểu chữ bạn chọn tất cả đều ảnh hưởng đến khả năng đọc nội dung của mình, cũng như cách bạn căn chỉnh văn bản trên trang.
Trong thực tế, có các nguyên tắc liên kết trong thiết kế để tạo ra các thiết kế có tổ chức, logic và có thể đọc được. Được biết đến như căn chỉnh cạnh và trung tâm, các nguyên tắc này nói rằng các yếu tố nên được tổ chức so với một dòng vô hình hoặc lề. Dưới đây là một ví dụ về một danh thiếp tuân theo các nguyên tắc này và bao gồm văn bản mà các liên kết trái, được liên kết bên phải và được liên kết trung tâm. Nguồn hình ảnh Hãy nói rằng chúng tôi muốn sắp xếp đúng tất cả các tiêu đề trên trang. Chúng ta có thể áp dụng văn bản quy tắc CSS-Align: Quyền đối với tất cả các H2 để biện minh cho chúng:text-align: right to all H2s to right justify them: Xem Bút văn bản-Align: Ngay bởi Christina Perricone (@HubSpot) trên Codepen. Vì căn chỉnh là một loại kiểu kiểu trang, nên cách tốt nhất để căn chỉnh nội dung HTML trên trang là với thuộc tính CSS Text-Align. Văn bản-Align đặt sự liên kết ngang của nội dung bên trong một phần tử khối (nghĩa là, một phần tử bắt đầu một dòng mới và chiếm toàn bộ chiều rộng của trang, như) hoặc một ô bảng. Mặc dù tên văn bản-Align ngụ ý rằng thuộc tính này hoạt động trên văn bản, nhưng nó cũng ảnh hưởng đến tất cả các nội dung khác bên trong phần tử khối, bao gồm hình ảnh và nút.text-align property. text-align sets the horizontal alignment of content inside a block element (i.e., an element that starts a new line and takes up the entire width of the page, like ) or a table cell. While the name text-align implies that this property works on text, it also affects all other content inside the block element, including images and buttons.text-align property. text-align sets the horizontal alignment of content inside a block element (i.e., an element that starts a new line and takes up the entire width of the page, like ) or a table cell. While the name text-align implies that this property works on text, it also affects all other content inside the block element, including images and buttons. Bạn có thể sử dụng thuộc tính Align văn bản trong CSS nội tuyến, CSS nội bộ hoặc CSS bên ngoài. CSS nội tuyến có nghĩa là HTML và CSS của bạn sẽ được đặt cùng nhau trong phần cơ thể của tài liệu HTML của bạn. Vì vậy, về mặt kỹ thuật, bạn sẽ sắp xếp văn bản trong HTML.text-align property in inline CSS, internal CSS, or external CSS. Inline CSS means your HTML and CSS will be placed together in the body section of your HTML document. So, technically, you’ll be aligning text “in HTML.” text-align property in inline CSS, internal CSS, or external CSS. Inline CSS means your HTML and CSS will be placed together in the body section of your HTML document. So, technically, you’ll be aligning text “in HTML.” Tuy nhiên, CSS bên trong và bên ngoài được khuyến nghị qua CSS nội tuyến. Điều này là do việc tách mã kiểu (CSS) của bạn khỏi mã nội dung (HTML) của bạn có nghĩa là bạn có thể dễ dàng thực hiện các thay đổi nội dung trong tương lai mà không ảnh hưởng đến kiểu dáng trang và ngược lại. HTML Align Text CenterCăn chỉnh văn bản dọc theo trục trung tâm là phổ biến trên các trang web. Tuy nhiên, trong khi nó làm cho trang trông có tổ chức và đối xứng, hãy tập trung mọi thứ trên trang có thể nhàm chán. Thêm vào đó, tập trung các đoạn văn bản lớn có thể khiến việc đọc trở nên khó khăn hơn. Do đó, căn chỉnh trung tâm nên được lưu cho các tiêu đề, trích dẫn khối, nút gọi hành động và các yếu tố khác phá vỡ luồng của tài liệu để thu hút sự chú ý của người đọc. Ở đây, một ví dụ về việc sử dụng căn chỉnh trung tâm trên các yếu tố quan trọng nhất trên trang chủ của bạn: Nguồn hình ảnh Để đạt được một cái nhìn cân bằng tương tự trên trang web của bạn, bạn cần biết cách sắp xếp văn bản của bạn theo ba cách này. Mặc dù hầu hết các nền tảng xây dựng trang web sẽ cung cấp các nút để đơn giản hóa quy trình này, bạn có thể xây dựng một trang web, ứng dụng hoặc đồ họa từ đầu hoặc trong một công cụ không có các tùy chọn này. Trong những trường hợp này, bạn sẽ cần biết cách căn chỉnh văn bản bằng mã.text-align: center on the headings to achieve this:text-align: center on the headings to achieve this: Trong bài đăng này, chúng tôi sẽ đi qua cách để căn chỉnh, căn chỉnh bên phải và trung tâm căn chỉnh văn bản với HTML và CSS. Vì căn chỉnh là một loại kiểu kiểu trang, nên cách tốt nhất để căn chỉnh nội dung HTML trên trang là với thuộc tính CSS Text-Align. Văn bản-Align đặt sự liên kết ngang của nội dung bên trong một phần tử khối (nghĩa là, một phần tử bắt đầu một dòng mới và chiếm toàn bộ chiều rộng của trang, như) hoặc một ô bảng. Mặc dù tên văn bản-Align ngụ ý rằng thuộc tính này hoạt động trên văn bản, nhưng nó cũng ảnh hưởng đến tất cả các nội dung khác bên trong phần tử khối, bao gồm hình ảnh và nút.text-align property cannot be used directly on the button to center it. Instead, we can place the button inside a div, the generic block-level element, then apply text-align: center to this div container:text-align property cannot be used directly on the button to center it. Instead, we can place the button inside a div, the generic block-level element, then apply text-align: center to this div container: Bạn có thể sử dụng thuộc tính Align văn bản trong CSS nội tuyến, CSS nội bộ hoặc CSS bên ngoài. CSS nội tuyến có nghĩa là HTML và CSS của bạn sẽ được đặt cùng nhau trong phần cơ thể của tài liệu HTML của bạn. Vì vậy, về mặt kỹ thuật, bạn sẽ sắp xếp văn bản trong HTML. Tuy nhiên, CSS bên trong và bên ngoài được khuyến nghị qua CSS nội tuyến. Điều này là do việc tách mã kiểu (CSS) của bạn khỏi mã nội dung (HTML) của bạn có nghĩa là bạn có thể dễ dàng thực hiện các thay đổi nội dung trong tương lai mà không ảnh hưởng đến kiểu dáng trang và ngược lại. HTML Align Text CenterCăn chỉnh văn bản dọc theo trục trung tâm là phổ biến trên các trang web. Tuy nhiên, trong khi nó làm cho trang trông có tổ chức và đối xứng, hãy tập trung mọi thứ trên trang có thể nhàm chán. Thêm vào đó, tập trung các đoạn văn bản lớn có thể khiến việc đọc trở nên khó khăn hơn. Do đó, căn chỉnh trung tâm nên được lưu cho các tiêu đề, trích dẫn khối, nút gọi hành động và các yếu tố khác phá vỡ luồng của tài liệu để thu hút sự chú ý của người đọc. Ở đây, một ví dụ về việc sử dụng căn chỉnh trung tâm trên các yếu tố quan trọng nhất trên trang chủ của bạn: Hãy nói rằng tôi đã xây dựng một trang web và tôi muốn tập trung vào tiêu đề của mình, nhưng giữ mọi thứ khác được liên kết trái. Tôi có thể sử dụng quy tắc văn bản-Align: trung tâm trên các tiêu đề để đạt được điều này:text-align property to achieve this effect.text-align property to achieve this effect. Xem Bút văn bản-Align: Center 1 của Christina Perricone (@HubSpot) trên Codepen. Bây giờ, hãy để nói rằng tôi muốn tập trung một phần tử nút trên trang. Vì nút HTML là một phần tử nội tuyến, không phải là phần tử cấp khối, thuộc tính văn bản-Align không thể được sử dụng trực tiếp trên nút để tập trung vào nó. Thay vào đó, chúng ta có thể đặt nút bên trong DIV, phần tử cấp khối chung, sau đó áp dụng văn bản-Align: Center cho container div này: Xem Bút văn bản-Align: Center 2 của Christina Perricone (@HubSpot) trên Codepen.text-align: left. In the example below, the div element is set to center all content inside it. However, when we apply text-align: left to the second paragraph, this overrides the div’s styling:text-align: left. In the example below, the div element is set to center all content inside it. However, when we apply text-align: left to the second paragraph, this overrides the div’s styling: Xem Bút văn bản-Align: Left 2 của Christina Perricone (@HubSpot) trên Codepen. HTML căn chỉnh văn bản đúngCăn chỉnh văn bản theo lề bên phải là loại căn chỉnh ít phổ biến nhất vì nó mâu thuẫn với cách hầu hết mọi người đọc văn bản. Mặc dù nó đòi hỏi nhiều nỗ lực hơn để đọc, văn bản đúng đắn-khi được sử dụng một cách chiến lược-có thể tạo ra một cái nhìn độc đáo cho bìa tạp chí, sơ yếu lý lịch, thơ, áp phích, danh thiếp hoặc nội dung dạng ngắn khác. Ở đây, một ví dụ về hiệu ứng nổi bật có thể có văn bản phù hợp với: Nguồn hình ảnh Hãy nói rằng chúng tôi muốn sắp xếp đúng tất cả các tiêu đề trên trang. Chúng ta có thể áp dụng văn bản quy tắc CSS-Align: Quyền đối với tất cả các H2 để biện minh cho chúng:text-align: right to all H2s to right justify them:text-align: right to all H2s to right justify them: Xem Bút văn bản-Align: Ngay bởi Christina Perricone (@HubSpot) trên Codepen. Căn chỉnh văn bản của bạn với HTML & CSSNếu bạn có một số kiến thức thiết kế web cơ bản, bạn có thể thay đổi sự liên kết của văn bản của bạn. Điều này có thể giúp bạn xây dựng và tùy chỉnh bố cục trang của bạn và làm cho nội dung của bạn dễ đọc hơn. Chỉ cần đảm bảo rằng, cuối cùng, sự sắp xếp của bạn phục vụ trải nghiệm đọc. Lưu ý của biên tập viên: Bài đăng này ban đầu được xuất bản vào tháng 8 năm 2020 và đã được cập nhật về tính toàn diện.
|
