Align HTML là gì

Ở các phần trước chúng ta đã được học về các thuộc tính căn chỉnh nội dung trong một trang web và bài này mình sẽ giới thiệu với mọi người một thuộc tính căn chỉnh nội dung, khối trong một trang web nữa. Đó là thuộc tính vertical-align.

1, Thuộc tính vertical-align trong CSS.

-Thuộc tính vertical-align trong CSS có tác dụng sắp xếp nội dungtheo chiều dọc.

Cú Pháp:

vartical-align: value;

Trong đó: value là một trong các giá trị sau:

• đơn vị đo khoảng cách [có thể là số âm].
• baseline- đây là dạng mặc định. Các thành phần đều nằm trên cùng một đường cơ bản.
• sub - giống như khi bạn sử dụng tag sub trong HTML.
• super - giống như khi bạn sử dụng tag sup trong HTML.
• top - căn lề cao bằng với thành phần cao nhất trong thành phần.
• text-top - căn trênbằng với text trêncùng của thành phần.
• middle - căn giữa theo thành phần bao ngoài.
• bottom-căn dưới theo thành phần dưới cùng của thành phần.
• text-bottom - căn dưới bằng với text dưới cùng của thành phần.

2, Ví dụ.

-Để hiểu hơn về các thuộc tính trên thì các bạn theo dõi các ví dụ sau:

Toidiocde.com demo vertical-align p{ background-color: green; } span{ background-color: orange; }

giá trị là đơn vị đo đọ dài

giá trị là baseline

giá trị là sub

giá trị là suspaner

giá trị là tospan

giá trị là text-tospan

giá trị là middle

giá trị là bottom

giá trị là text-bottom

Xem Kết Quả

3, Lời kết.

-Như vậy mình đã giới thiệu xong đến mọi người về thuộc tính vertical-align trong CSS rồi. Vi thuộc tính này ít khi phải sử dụng đến nên mình chỉ demo cơ bản thôi chứ không đi sâu vào các ví dụ chi tiết.

Đăng ký nhận tin.

Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!

Đăng Ký

CSS

Bài trước Bài sau

1 comments 508 likes

About author

The best way to learn is to share

Xem tất cả bài đăng

Bài Viết Mới

• Những tính năng mới trong PHP 8.1

  3 tháng trước 5 Comments

• Bài 39: Cache trong Laravel 8

  10 tháng trước 1 Comments

• PHP Swoole là gì? nó có gì mạnh?

  11 tháng trước 0 Comment

• Cài đặt SSL trên local sử dụng mkcert

  11 tháng trước 4 Comments

1 Comments

Bạn ơi cho mình hỏi có cá thành phần bottom và text-bottom, top sao mình không thấy nó thay đổi gì vậy bạn mình thấy hơi khó hiểu quá bạn giải thích giúp mình với ạ :] cám ơn bạn nhiều

Lê Mạnh Sơn

Reply

Bình luận

Đăng