Thuộc tính vertical-align trong CSS

Khi căn chỉnh vị trí cho các phần tử HTML cần tới sự hỗ trợ của nhiều thuộc tính khác nhau. Bên trong bài này bạn sẽ được tìm hiểu về vertical-align trong CSS. Đây là thuộc tính giúp thiết lập giá trị theo chiều dọc của trục tọa độ Y.

Định nghĩa: Thuộc tính vertical-align CSS dùng để sắp xếp các nội dung theo chiều dọc.

Ví dụ về Vertical-align CSS

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<style tyspane="text/css">
    .sub-price {
        background-color: green;
    }
</style>
<body>
Giá bán: 3000 <span class="sub-price">VND</span>   
</body>
</html>

Khoảng cách

Giờ bạn thêm vertical-align: 15px; vào class .sub-price và xem kết quả

vertical-align

Khi thêm giá trị là 15px thì .sub-price đã cao hơn so với các phần tử còn lại.

vertical-align: baseline;

baseline là dạng mặc định, các phần tử nằm cùng đường cơ bản.

vertical-align: sub

Sub được hạ thấp so với phần tử còn lại.

vertical-align-sub

vertical-align: super

Super đẩy cao hơn so với phần tử còn lại.

vertical-align-super

vertical-align: top

Top dùng để canh theo phần tử cao nhất trong cùng một hàng.

vertical-align: middle

vertical-align: middle; dùng để canh giữa theo thành phần bao ngoài.

vertical-align: bottom

Canh theo phần tử thấp nhất trong cùng một hàng.

vertical-align: text-bottom

Canh phần dưới của phần tử theo phần dưới cùng thấp nhất của text của thành phần bao ngoài.

Hãy xem hình ảnh bên dưới để rõ hơn

vertical-align-css

Như vậy bạn đã biết cách sử dụng thuộc tính Vertical-align rồi. Chúc bạn học HTML và CSS thật hiệu quả sau khi đọc bài viết này.

Related Posts

Hover-CSS-1

Hiệu ứng rê chuột trong CSS

CSS là ngôn ngữ trang trí với nhiều hiệu ứng hay. Bạn sẽ thường gặp nhất là khi di chuyển chuột vào một liên kết (Link) hay…

Mẫu Form đăng nhập HTML và CSS đẹp mắt

Trong một số bài viết trên blog này mình đã chia sẻ về cách tạo một Form đăng nhập đơn giản. Nhưng để có một Form đẹp…

form-lien-he-4

Hướng dẫn tạo form liên hệ bằng HTML, CSS

Form liên hệ là một chức năng không thể thiếu cho blog, website. Thông qua Form độc giả, khách hàng có thể yêu cầu admin trợ giúp…

css-code-1

8 Cách viết CSS chuẩn, dễ đọc và tối ưu

Nói tới xây dựng giao diện phía Front-end không thể thiếu CSS. Ngôn ngữ được sử dụng phổ biến để sắp xếp bố cục các phần tử…

Thuộc tính text-shadow trong CSS

Trong những lúc rảnh rỗi mình thường hay nghịch ngợm một vài thứ hay ho tìm thấy trên internet. Đối với CSS thì text-shadow cũng là thuộc…

Thuộc tính Overflow trong CSS

Khi thiết kế web với HTML và CSS đôi khi chúng ta sẽ gặp phải tình trạng văn bản (text) bị tràn ra khỏi phần tử HTML…