1) Thuộc tính text-align trong CSS- Thuộc tính text-align dùng để "canh lề theo chiều ngang" cho văn bản bên trong phần tử. Show
- Ví dụ:
- Lập Trình Web - Lập Trình Web - Lập Trình Web - HTML là ngôn ngữ đầu tiên mà một nhà thiết kế web phải học. HTML được dùng để tạo ra các nội dung cho trang web, ví dụ như: hình ảnh, âm thanh, video, các liên kết, các đoạn văn bản,.... HTML cực kỳ dễ học. Đồng thời, chúng tôi xin giới thiệu đến các bạn loạt Tài liệu hướng dẫn học HTML đã được biên soạn kỹ lưỡng theo trình tự từ cơ bản đến nâng cao kèm theo nhiều ví dụ minh họa đơn giản dễ hiểu. Hứa hẹn sẽ giúp bạn đọc dễ dàng tiếp thu ngôn ngữ HTML trong thời gian ngắn nhất với khối lượng kiến thức đầy đủ nhất. - Lưu ý: Thuộc tính text-align không chỉ dùng để canh lề cho văn bản, mà nó còn có thể dùng để canh lề cho hầu hết các loại nội dung bên trong phần tử, ví dụ:
 2) Cách sử dụng thuộc tính text-align trong CSS- Để sử dụng thuộc tính text-align, ta dùng cú pháp như sau: - Trong đó, ta thấy giá trị của thuộc tính text-align có thể được xác định bởi một trong sáu loại:
1) Thuộc tính text-align trong CSS- Thuộc tính text-align dùng để "canh lề theo chiều ngang" cho văn bản bên trong phần tử. Nội dung chính Show
- Ví dụ:
- Lập Trình Web - Lập Trình Web - Lập Trình Web - HTML là ngôn ngữ đầu tiên mà một nhà thiết kế web phải học. HTML được dùng để tạo ra các nội dung cho trang web, ví dụ như: hình ảnh, âm thanh, video, các liên kết, các đoạn văn bản,.... HTML cực kỳ dễ học. Đồng thời, chúng tôi xin giới thiệu đến các bạn loạt Tài liệu hướng dẫn học HTML đã được biên soạn kỹ lưỡng theo trình tự từ cơ bản đến nâng cao kèm theo nhiều ví dụ minh họa đơn giản dễ hiểu. Hứa hẹn sẽ giúp bạn đọc dễ dàng tiếp thu ngôn ngữ HTML trong thời gian ngắn nhất với khối lượng kiến thức đầy đủ nhất. - Lưu ý: Thuộc tính text-align không chỉ dùng để canh lề cho văn bản, mà nó còn có thể dùng để canh lề cho hầu hết các loại nội dung bên trong phần tử, ví dụ:
2) Cách sử dụng thuộc tính text-align trong CSS- Để sử dụng thuộc tính text-align, ta dùng cú pháp như sau: - Trong đó, ta thấy giá trị của thuộc tính text-align có thể được xác định bởi một trong sáu loại:
Phần này tìm hiểu căn chỉnh text trong css (căn lề trong html), như căn trái, căn phải css, căn giữa css Thuộc tính text-align để căn chỉnh vị trí của chữ hoặc các phần tử dạng inline theo chiều ngang trong phần tử HTML chứa dạng block. Mặc định là căn lề trái, tuy nhiên bạn có thể chỉ ra các giá trị:
Chú ý: Thuộc tính text-align chỉ áp dụng cho những phần tử HTML chứa dạng khối block như <p> <div> <p> <h2> <table> ... và bên trong phần tử chứa text-align chỉ tác động đến các phần tủ HTML dạng inline như <span> <a> <img> ... Tham khảo thêm: phần tử html dạng block và inline Ví dụ: Căn trên dưới (theo chiều đứng) vertical-align trong cssThuộc tính vertical-align dùng để căn chỉnh theo chiều đứng ap dụng cho các phần tử dạng inline, inline-block và trong các ô bảng (phần tử <td>). Các giá trị nhận phổ biến là top, middle, bottom
Ví dụ sử dụng vertical-align với giá trị top, middle, bottom:Ví dụ sử dụng vertical-align với giá trị baseline, sub, super ... :Thuộc tính This trick is called "Ben Justification" *How to justify a single line of text with css Well, it's not quite all with css, you need to add a little extra to the end of the line. The markup for the heading above is... <h2 id="banner"> How to justify a single line of text with css<span> </span> </h2> The little addition at the end of the line triggers the justification of the line by starting a new line. The additional content (<span> </span>) is forced onto a new line because the space is made 1000px wide (with word-spacing) and is treated like a word. The additional line does not display because the fontsize is set to 0px. Update, 23-Jan-11: I've just updated the markup to include a space after the within the span and setting the font size to 1px for the span: this is needed for IE8. Thanks to Mamoun Gadir for pointing out IE's problems. The css for the heading above is...
h2#banner {
border: 1px solid #666;
display: block;
width: 100%;
height: 1em;
font-size: 1em;
line-height: 1em;
margin: 20px auto;
padding: 0px ;
text-align: justify ;
}
h2#banner span {
font-size: 1px ;
word-spacing: 1000px;
}* Unless evidence demonstrates that this technique has been published before, I hereby name this technique "Ben Justification" and declare it free for all to use. Ben Clay, Jan 2010. |
