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 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à 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 css

Thuộ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

  • 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;display: table-cell;


Đăng ký nhận bài viết mới