Cafedev chia sẻ cho ace về Căn chỉnh ngang & dọc của bố cục trong CSS thông qua ví dụ và thực thi chi tiết tại bài viết này

Nội dung chính

1. Căn giữa các thành phần

Để căn giữa một phần tử khối theo chiều ngang [như < div >], hãy sử dụng 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

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

.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}




Center Align Elements
To horizontally center a block element [like div], use margin: auto;


  
Note: Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.

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%]

2. Căn giữa Văn bản – Căn giữa Văn bản

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

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




Center Text


  
This text is centered.

3. Căn trái và Phải – Sử dụng vị trí

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




Right Align
An example of how to right align elements with the position property:


  
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

  

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

4. Căn trái và Phải – Sử dụng float

Một phương pháp khác để chỉnh sửa các phần tử đang sử dụng thuộc tính float

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




Right Align
An example of how to right align elements with the float property:


  
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

Lưu ý. Nếu một phần tử 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 của nó. Bạn có thể sử dụng hack “clearfix” để sửa lỗi này [xem ví dụ bên dưới]

5. Căn giữa theo chiều dọc – Buffer used

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 bộ đệm trên và dưới

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




Center Vertically
In this example, we use the padding property to center the div element vertically:


  
I am vertically centered.

6. Căn giữa theo chiều dọc – Use line-height

Một mẹo khác là sử dụng thuộc tính chiều cao dòng với giá trị bằng chiều cao thuộc tính

.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;
}




Centering
In this example, we use the line-height property with a value that is equal to the height property to center the div element:


  
I am vertically and horizontally centered.

7. Căn giữa theo chiều dọc – Use Flexbox

Bạn cũng có thể sử dụng flexbox để căn giữa mọi thứ. Chỉ cần lưu ý rằng flexbox không được hỗ trợ trong IE10 và các phiên bản trước đó

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




Flexbox Centering

A container with both the justify-content and the align-items properties set to center will align the item[s] in the center [in both axis].


  
I am vertically and horizontally centered.

Full series CSS tự học từ cơ bản đến nâng cao

Nếu thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa