Căn Lề Text-align Và Vertical-align Trong CSS
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
công cụ sinh css text-align kiểm tra căn lề trái, phải ...
left right center justify Đây là các dòng chữ để kểm tra căn lề trái phải khi dùng thuộc tính text-align. Dòng chữ này nằm trực tiếp trong phần tử block. Dòng chữ cũng coi như dạng Inline Đây là phần tử BLOCK Đây là phần tử INLINE (span, strong, em ...) BLOCK ???- Box màu viền đỏ là phần tử chứa - nó là phần tử BLOCK, thuộc tính text-align của phần tử này sẽ điều khiển cách căn lề các phần tử con dạng INLINE bên trong (phần tử html dạng block và inline)
- Box màu xanh lá (green) là loại phần tử inline, nó sẽ chịu tác dụng của text-align của phần tử chứa.
- Box màu blue (xanh) là loại phần tử block, bản thân nó sẽ không chịu tác dụng của text-align từ phần tử chứa. Nhưng nó lại có thể kế thừa text-align từ phần tử chứa (để tiếp tục tác dụng vào phần tử inline trong nó).
Căn lề với text-align trong 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ị:
- left hoặc start: căn lề trái
- right hoặc end: căn lề phải
- center: căn giữa
- justify: dãn đều chữ
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> <h1> <table> ... và tác động đến các phần tử bên trong nếu phần tử đó là dạng inline như <span> <a> <img> ... Tham khảo thêm: phần tử html dạng block và inline. Cũng lưu ý nếu bên phần tử chứa có phần tử dạng block, phần tử này không có thuộc tính text-align riêng, thì nó sẽ kế thừa từ phần tử cha thuộc tính này.
Ví dụ:
<style> p.left { text-align: left; } p.right { text-align: right; } p.center { text-align: center; } </style> <p class="left">Đoạn văn bản này căn lề <strong>trái.</strong></p> <p class="right">Đoạn văn bản này căn lề <strong>phải.</strong></p> <p class="center">Đoạn văn bản này căn <strong>giữa.</strong></p>Căn trên dưới (theo chiều đứng) vertical-align trong css
Thuộc tính vertical-align dùng để căn chỉnh theo chiều đứng của phần các phần tử dạng inline, inline-block đứng cạnh nhau trong một hàng (đường). Đặc biệt căn lề theo chiều đứng của nội dung trong phần tử <td> (ô bảng) với giá trị nhận phổ biến là top, middle, bottom
- top căn mép trên
- middle căn giữa
- bottom căn mép dưới
- baseline căn theo đường cơ sở
- sub chữ thụt xuống
- sup chữ nhô lên
- 10px, 10pt, 10cm lệch lên một giá trị (âm thì xuống)
Ví dụ sử dụng vertical-align với giá trị top, middle, bottom:
<style> td.top { vertical-align: top; } td.middle { vertical-align: middle; } td.bottom { vertical-align: bottom; } </style> <table border="1" cellpadding="2" cellspacing="0" style="height: 150px;"> <tr> <td class="top">Top</td> <td class="middle">Middle</td> <td class="bottom">Bottom</td> </tr> </table>Ví dụ sử dụng vertical-align với giá trị baseline, sub, super ... :
<style> span.baseline { vertical-align: baseline; color: red; } span.sub { vertical-align: sub; color: red; } span.super { vertical-align: super; color: red; } span.pixel { vertical-align: -10px; color: red; } </style> <p>This is an <span class="baseline">inline text</span> example.</p> <p>This is a <span class="sub">sub line text</span> example.</p> <p> This is a <span class="super">super line text</span> example.</p> <p> This is a <span class="pixel">pixel</span> example.</p>Thuộc tính vertical-align muốn áp dụng cho các phần tử dạng block thì cần chuyển nó về dạng inline, inline-block. Ví dụ như trong thẻ div có thể cần thêm các thuộc tính để nó làm việc chính xác: ví dụ: display: inline-table; và display: table-cell;
Mục lục bài viết Căn lề với text-alignCăn trên dưới với vertical-align ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mớiTừ khóa » Hàng Css
-
[CSS] Hướng Dẫn Xây Dựng Những Mẫu CSS Hàng đầu Hiện Nay (P2)
-
[CSS] Hướng Dẫn Xây Dựng Những Mẫu CSS Hàng đầu Hiện Nay (P1)
-
{Css Thực Chiến} Hiển Thị Danh Sách Sản Phẩm Web Bán Hàng Với ...
-
Học CSS - Tìm Hiểu Thuộc Tính "display" - Thạch Phạm
-
Một Số Phương Thức Khác Nhau Của CSS Cho Việc Thay đổi Thứ Tự ...
-
Hướng Dẫn CSS Cho Mỗi Item Sản Phẩm - Free Web App
-
Css Thẳng Hàng Hoặc Nhiều Dòng Thẳng Hàng? - HelpEx
-
Căn Chỉnh - Align Trong CSS
-
Thiết Lập Kiểu Hiển Thị Của Phần Tử Bằng Thuộc Tính Display Trong CSS
-
Tổng Hợp Các Thuộc Tính Của CSS | Tìm ở đây
-
Tạo Danh Sách Sản Phẩm Bằng Html Css Vừa Dễ Vừa đẹp
-
CSS Box Model - Các Cách Hiển Thị Element Với Thuộc Tính Display
-
Tìm Hiểu Chi Tiết Về Spacing Trong CSS - Evondev Blog
-
Tìm Hiểu Các Thuộc Tính Quy định Vị Trí Trôi Nổi, Dàn Hàng Ngang Sử ...