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ới