Align cách dùng

Ví dụ:

Căn giữa hình ảnh

Để căn giữa một ảnh, đặt margin-left và margin-right thành auto và làm
cho hình ảnh trở thành phần tử dạng block như đã nói ở lưu ý phía trên.

Căn chỉnh văn bản theo chiều ngang - Sử dụng text-align

Trong CSS có thuộc tính text-align cho phép căn chỉnh văn bản nội dung sẽ nằm bên trái, ở giữa hay bên phải của phần tử bằng các giá trị:

• text-align: center - căn giữa
• text-align: left - căn trái
• text-align: right - căn phải

Ví dụ:

Căn giữa

Căn trái

Căn phải

Lưu ý: Thuộc tính text-align cũng chỉ áp dụng cho phần tử block vì inline chỉ chiếm độ rộng vừa đủ nội dung của nó.

Tìm hiểu thêm về định dạng văn bản trong CSS tại đây

Căn trái/phải - Sử dụng position

Một phương pháp khác để căn chỉnh phần tử là sử dụng position: absolute.

Ví dụ:

Căn phải sử dụng position

Quantrimang.com là mạng xã hội về khoa học công nghệ, mở rộng nội dung
để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như
điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính...

Căn trái/phải - Sử dụng float

Thuộc tính float cũng được sử dụng để căn chỉnh phần tử.

Ví dụ:

Căn phải sử dụng float

Quantrimang.com là mạng xã hội về khoa học công nghệ, mở rộng nội dung
để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như
điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính...

Chú ý: Nếu một phần tử đang được float cao hơn phần tử cha thì sẽ gây ra hiện tượng tràn nội dung ra bên ngoài. Để khắc phục, ta sử dụng clearfix overflow: auto:

Trong ví dụ này, hình ảnh đang được float vào cao hơn thành phần chứa nó,
do đó bị tràn ra bên ngoài:

Nho là một loại quả mọng lấy từ các loài cây thân leo thuộc chi Nho (Vitis).
Quả nho mọc thành chùm từ 6 đến 300 quả, chúng có màu đen, lam, vàng, lục,
đỏ-tía hay trắng.

Sử dụng class clearfix với giá trị overflow: auto để
khắc phục:

Nho là một loại quả mọng lấy từ các loài cây thân leo thuộc chi Nho (Vitis).
Quả nho mọc thành chùm từ 6 đến 300 quả, chúng có màu đen, lam, vàng, lục,
đỏ-tía hay trắng.

Căn giữa theo chiều dọc - Sử dụng padding

Có nhiều cách để căn giữa một phần tử theo chiều dọc trong CSS. Giải pháp đơn giản nhất đó là sử dụng padding.

Ví dụ:

Căn giữa theo chiều dọc - Sử dụng padding

Ví dụ này, chúng tôi sử dụng thuộc tính padding để căn giữa phần tử div
theo chiều dọc:

Để căn gữa cả theo chiều ngang và chiều dọc, sử dụng padding kèm theo thuộc tính text-align: center.

Căn giữa theo chiều dọc - Sử dụng line-height

Bạn cũng có cách khác để căn giữa theo chiều dọc là sử dụng thuộc tính line-height với giá trị giống như thuộc tính height.

Ví dụ:

Căn giữa theo chiều dọc - Sử dụng line-height

Ví dụ này, chúng tôi sử dụng thuộc tính line-height có giá trị bằng
thuộc tính height để căn giữa phần tử div theo chiều dọc:

Căn giữa theo chiều dọc - Sử dụng position và transform

Nếu không sử dụng padding và line-height như trên, bạn có thể dùng cách thứ ba là sử dụng position và transform:

Ví dụ:

Căn giữa theo chiều dọc - Sử dụng position và transform

Ví dụ này, chúng tôi sử dụng thuộc tính position và transform để căn
giữa phần tử div theo chiều dọc:

Lưu ý: Thuộc tính transform không được hỗ trợ trong IE8 và các phiên bản
trước đó.

Lưu ý: Thuộc tính transform không được hỗ trợ trong IE8 và các phiên bản trước đó.

Bài trước: Thuộc tính Display (inline-block) trong CSS

Bài tiếp: Combinator trong CSS