Căn Chỉnh Các Phần Tử Trong CSS (CSS Align) - Lập Trình Từ Đầu

1. Căn giữa các phần tử theo chiều ngang trong CSS

1.1 Căn giữa phần tử tạo khối

Để căn giữa một phần tử khối theo chiều ngang (như <div>), hãy sử dụng thuộc tính margin: auto;

Đặt chiều rộng của phần tử sẽ ngăn phần tử đó kéo dài ra các cạnh của vùng chứa

Sau đó, phần tử sẽ chiếm chiều rộng được chỉ định và không gian còn lại sẽ được chia đều giữa hai lề

Ví dụ:

Lưu ý: Căn giữa không có hiệu lực nếu thuộc tính width không được đặt (hoặc được đặt thành 100%)

1.2 Căn giữa văn bản

Để chỉ căn giữa văn bản bên trong một phần tử, hãy sử dụng thuộc tính

text-align: center;

Ví dụ:

1.3 Căn giữa hình ảnh

Để căn giữa một hình ảnh, hãy đặt lề trái và phải auto và biến nó thành một phần tử khối

Ví dụ:

2. Căn trái và phải các phần tử trong CSS

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

Ví dụ:

Lưu ý: Các phần tử có vị trí tuyệt đối bị xóa khỏi luồng thông thường và có thể chồng chéo các phần tử

Các bạn cũng có thể tham khảo cách căn phải và trái khác ở bài 21

3. Căn giữa các phần tử theo chiều dọc trong CSS

3.1 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. Một giải pháp đơn giản là sử dụng padding

Ví dụ:

Để căn giữa theo cả chiều dọc và chiều ngang, hãy sử dụng padding và text-align: center

Ví dụ:

3.2 Căn giữa theo chiều dọc sử dụng chiều cao dòng

Một thủ thuật khác là sử dụng thuộc tính line-height có giá trị bằng với thuộc tính height

Ví dụ:

3.3 Căn giữa theo chiều dọc sử dụng vị trí và chuyển đổi

Nếu padding và line-height không phải là cách bạn chọn, một giải pháp khác là sử dụng định vị và thuộc tính transform

Ví dụ:

3.4 Căn giữa theo chiều dọc sử dụng Flexbox

Bạn cũng có thể sử dụng flexbox để căn giữa mọi thứ

Ví dụ:

Ở đây, Một vùng chứa có cả thuộc tính justify-content và align-items được đặt ở giữa sẽ căn chỉnh các mục ở trung tâm (theo cả hai trục)

Lưu ý: flexbox không được hỗ trợ trong IE10 và các phiên bản trước đó