Bài 24: Bố Cục CSS – Căn Chỉnh Chiều Ngang Và Chiều Dọc - Tìm ở đây

Trang chủ » Căn Giữa Chiều Dọc Css » Bài 24: Bố Cục CSS – Căn Chỉnh Chiều Ngang Và Chiều Dọc - Tìm ở đây

Có thể bạn quan tâm

▲ ▼

►►Phần tử trung tâm theo chiều ngang và chiều dọc

Căn giữa cho phần tử

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

Thiết lập 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ử 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ụ:

.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } Lưu ý: Căn giữa sẽ không có hiệu lực nếu thuộc tính width không được thiết lập ( hoặc thiết lập 100%).

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

Để căn giữa văn bản bên trong một phần tử, sử dụng text-align: center;

Ví dụ:

.center { text-align: center; border: 3px solid green; }

Căn giữa một hình ảnh

Để căn giữa một hình ảnh, thiết lập lề trái và lề phải thành auto và biết nó thành phần tử khối block:

paris Ví dụ:

img { display: block; margin-left: auto; margin-right: auto; width: 40%; }

Căn chỉnh trái và phải – Sử dụng position

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

Ví dụ:

.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; } 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ăn chỉnh trái và phải – Sử dụng float

Phương pháp khác cho căn chỉnh phần tử là sử dụng thuộc tính float. Ví dụ:

.right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; }

The clearfix Hack

Lưu ý: Nếu một phần tử là cao hơn phần tử chứa nó, và nó được thả nổi, nó sẽ tràn ra bên ngoài vùng chứa nó. Bạn có thể sử dụng “clearfix hack” để sửa lỗi này (xem ví dụ bên dưới):

Sau đó bạn có thể thêm clearfix hack để phần tử chứa để khắc phục sự cố này: Ví dụ:

.clearfix::after { content: ""; clear: both; display: table; }

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 phương pháp đơn giản là sử dụng top và bottom padding: Căn giữa theo chiều dọc Ví dụ:

.center { padding: 70px 0; border: 3px solid green; }

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

.center { padding: 70px 0; border: 3px solid green; text-align: center; }

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

Một thủ thuật khác là sử dụng thuộc tính line-height với giá trị bằng thuộc tính height: Căn giữa sử dụng line-height Ví dụ:

.center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } .center p { line-height: 1.5; display: inline-block; vertical-align: middle; }

Căn giữa theo chiều dọc – Sử dụng position & transform

Nếu padding và line-height là không có tùy chọn, giải pháp khác là sử dụng position và thuộc tính transform: Căn giữa sử dụng thuộc tính transform Ví dụ:

.center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

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

Bạn có thể sử dụng flexbox để căng giữa mọi thứ. Chú ý rằng flexbox không hỗ trợ IE10 và phiên bản trước đó: Căn giữa Ví dụ:

.center { display: flex; justify-content: center; align-items: center; height: 200px; border: 3px solid green; }

Từ khóa » Căn Giữa Chiều Dọc Css