Hướng dẫn sử dụng CSS Align

Xem thêm các chuyên mục:

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

1- CSS Align

Không có một quy tắc chung nào để bạn căn chỉnh (Align) một phần tử, vì vậy phải tùy thuộc vào các tình huống để bạn đưa ra một giải pháp phù hợp. Trong bài viết này tôi sẽ đưa ra một vài tình huống và các giải pháp để căn chỉnh một phần tử.

Horizontal Align

Căn chỉnh theo phương ngang (Horizontal Align) là cách bạn làm cho phần tử hiển thị ở bên trái (Left), chính giữa (Center) hoặc bên phải (Right).

Vertical Align

Căn chỉnh theo phương thẳng đứng (Vertical Align) là cách bạn làm cho phần tử hiển thị ở bên trên (Top), chính giữa (Middle) hoặc bên dưới (Bottom).

2- CSS margin:auto

Nếu bạn có một phần tử khối (Block element), chẳng hạn <div>, và bạn muốn căn giữa theo phương ngang cho nó, CSS margin:auto là một giải pháp tốt.
Bạn cần thiết lập kích thước chiều rộng cho phần tử là một con số cụ thể, hoặc một giá trị phần trăm ( % ), nhưng phải nhỏ hơn 100%, điều này đảm bảo phần tử không chiếm toàn bộ không gian nằm ngang của phần tử chứa nó.
Và áp dụng CSS margin:auto cho nó.
margin-left: auto;
margin-right: auto;

/* OR:  */

margin: auto;
Chú ý: CSS margin-top:autoCSS margin-bottom:auto không có tác dụng căn chỉnh theo phương thẳng đứng.
h-align-block-example.html
<!DOCTYPE html>
<html>
<head>
    <title>CSS Align</title>
    <meta charset="UTF-8"/>
    <style>
        .center {
           margin-left: auto;
           margin-right: auto;
           width: 180px;
           border: 3px solid green;
           padding: 10px;
        }
    </style>
</head>
<body>

    <h3>Horizontal Align - Center</h3>

    <hr/>

    <div class = "center">
         margin-left: auto; <br/>
         margin-right: auto; <br/>
         width: 180px; <br/>
         border: 3px solid green; <br/>
         padding: 10px;<br/>
    </div>

</body>
</html>

3- CSS text-align

Thuộc tính (property) CSS text-align được sử dụng cho một phần tử khối (block element) hoặc một ô (cell) của bảng để căn chỉnh theo phương ngang (Horizontal align) nội dung nội tuyến (inline content) của nó.
Khi CSS text-align được áp dụng cho một phần tử, nó có tác dụng với tất cả các nội dụng nội tuyến (inline content) của phần tử này, chẳng hạn nội dung văn bản, các phần tử con như <span>,.. Nhưng nó không có tác dụng đối với các phần tử khối con của phần tử hiện tại.

4- CSS float

Xem thêm các chuyên mục: