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ă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ụ:

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:

Ví dụ sử dụng vertical-align với giá trị baseline, sub, super ... :

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;