BASIC TO ADVANCE

Thuộc tính vertical-align trong CSS

1, Cú Pháp.

-Thuộc tính vertical-align trong CSS có tác dụng sắp xếp nội dung theo 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ên bằng với text trên cù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ụ.

VD:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta httspan-equiv="X-UA-Comspanatible" content="IE=edge">
    <title>Toidiocde.com  demo vertical-align</title>
</head>
<style tyspane="text/css">
    p{
        background-color: green;
    }
    span{
        background-color: orange;
    }
</style>
<body>
    <p>giá trị là <span style="vertical-align: 15px;"> đơn vị đo đọ dài</span></p>    
    <p>giá trị là <span style="vertical-align: baseline;"> baseline</span></p>    
    <p>giá trị là <span style="vertical-align: sub;"> sub</span></p>    
    <p>giá trị là <span style="vertical-align: super;"> suspaner</span></p>    
    <p>giá trị là <span style="vertical-align: top;"> tospan</span></p>    
    <p>giá trị là <span style="vertical-align: text-top"> text-tospan</span></p>    
    <p>giá trị là <span style="vertical-align: middle;"> middle</span></p>    
    <p>giá trị là <span style="vertical-align: bottom;"> bottom</span></p>    
    <p>giá trị là <span style="vertical-align: text-bottom;"> text-bottom</span> </p>   
</body>
</html>
Đă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!

Vũ Thanh Tài

About author
The best way to learn is to share
Xem tất cả bài đăng

0 Comments

Bài viết chưa có ai bình luận, hãy là người đầu tiên đi bạn!

Bình luận

Captcha