Ở 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>
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!
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
7 năm trước