Bài 24: Bố cục CSS – Horizontal & Vertical Align | Tìm ở đây

▲

▼

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

Căn giữa cho thành phần

Để 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 thành phần sẽ ngăn thành phần đó lê dài ra những cạnh của vùng chứa .
Sau đó, thành phần chiếm chiều rộng được chỉ định và khoảng trống 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:

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:

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:

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:

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 và 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:

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 đó:

Ví dụ:

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

Source: https://final-blade.com
Category: Kiến thức Internet