DANH MỤC: CSS

Bài 12: Thuộc tính vertical-align trong CSS


Ở 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 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ụ.

-Để 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:

<!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>

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.

Nguồn: Toidicode.com

Thông tin tác giả

Vũ Thanh Tài

Vũ Thanh Tài

The best way to learn is to share

Hãy tham gia group facebook để cùng giao lưu chia sẻ kiến thức! Tham Gia