Thuộc tính vertical-align trong CSS

By Vũ Thanh Tài

10-07-2017 5 phút đọc

Font size

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>

Chạy Code