CodeGym/Các khóa học/Frontend SELF VI/Canh giữa các phần tử

Canh giữa các phần tử

Có sẵn

9.1 Canh giữa theo chiều ngang

Canh giữa các phần tử trên trang web là một trong những nhiệm vụ cơ bản của thiết kế web. Nó giúp tạo ra các bố cục dễ nhìn và dễ đọc. Dưới đây là các phương pháp canh giữa theo chiều ngang và chiều dọc của các phần tử, sử dụng các kỹ thuật CSS hiện đại.

1. Canh giữa các phần tử khối bằng margin: auto

Một trong những cách đơn giản nhất để canh giữa các phần tử khối là sử dụng margin: auto.

Ví dụ:

CSS
.centered-box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  margin: 0 auto;
}
HTML
<div class="centered-box"></div>

Giải thích mã:

  • margin: 0 auto;: đặt lề tự động ở bên trái và phải, canh giữa phần tử theo chiều ngang

2. Canh giữa các phần tử dòng với text-align

Để canh giữa các phần tử dòng hoặc phần tử inline bên trong một phần tử khối, ta có thể sử dụng thuộc tính text-align: center.

Ví dụ:

CSS
.container {
  text-align: center;
  background-color: #f1c40f;
  padding: 20px;
}

.inline-element {
  background-color: #e74c3c;
  display: inline-block;
  padding: 10px;
  color: white;
}
HTML
<div class="container">
  <div class="inline-element">Phần tử dòng</div>
</div>

Giải thích mã:

  • text-align: center;: canh giữa các phần tử inline bên trong container khối

3. Canh giữa phần tử với Flexbox

Flexbox cung cấp một cách đơn giản và linh hoạt để canh giữa các phần tử cả theo chiều ngang và chiều dọc.

Ví dụ:

CSS
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #2ecc71;
}

.centered-box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
}
HTML
<div class="flex-container">
  <div class="centered-box"></div>
</div>

Giải thích mã:

  • display: flex;: thiết lập container dưới dạng Flexbox
  • justify-content: center;: canh giữa các phần tử theo chiều ngang
  • align-items: center;: canh giữa các phần tử theo chiều dọc (sẽ được xem xét chi tiết hơn sau)

9.2 Canh giữa theo chiều dọc

1. Canh giữa bằng Flexbox

Flexbox cung cấp một cách đơn giản để canh giữa phần tử theo chiều dọc.

Ví dụ:

CSS
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #2ecc71;
}

.centered-box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
}
HTML
<div class="flex-container">
  <div class="centered-box"></div>
</div>

Giải thích mã:

  • align-items: center;: canh giữa các phần tử theo chiều dọc

2. Canh giữa với CSS Grid

CSS Grid cung cấp khả năng mạnh mẽ để canh giữa các phần tử:

CSS
.grid-container {
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: #9b59b6;
}

.centered-box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
}
HTML
<div class="grid-container">
  <div class="centered-box"></div>
</div>

Giải thích mã:

  • display: grid;: thiết lập container dưới dạng CSS Grid
  • place-items: center;: canh giữa các phần tử cả theo chiều ngang và dọc

3. Canh giữa theo chiều dọc với position tuyệt đối và CSS transform

Sử dụng position tuyệt đối và CSS transform cho phép canh giữa các phần tử theo chiều dọc.

Ví dụ:

CSS
.container {
  position: relative;
  height: 100vh;
  background-color: #e74c3c;
}

.centered-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  background-color: #3498db;
}
HTML
<div class="container">
  <div class="centered-box"></div>
</div>

Giải thích mã:

  • position: absolute;: thiết lập phần tử ở vị trí tuyệt đối so với container
  • top: 50%;, left: 50%;: di chuyển phần tử 50% từ cạnh trên và trái của container
  • transform: translate(-50%, -50%);: di chuyển phần tử 50% kích thước của nó để canh giữa

4. Canh giữa theo chiều dọc với bảng và ô

Sử dụng bảng và ô để canh giữa các phần tử theo chiều dọc.

Ví dụ:

CSS
.table-container {
  display: table;
  width: 100%;
  height: 100vh;
  background-color: #f39c12;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-box {
  display: inline-block;
  background-color: #3498db;
  padding: 20px;
  color: white;
}
HTML
<div class="table-container">
  <div class="table-cell">
    <div class="centered-box">Phần tử đã được canh giữa</div>
  </div>
</div>

Giải thích mã:

  • .table-container: tạo ra container với display table
  • .table-cell: tạo ra ô bảng với căn giữa theo chiều dọc middle
1
Nhiệm vụ
Frontend SELF VI,  mức độbài học
Đã khóa
Căn giữa theo chiều ngang
Căn giữa theo chiều ngang
1
Nhiệm vụ
Frontend SELF VI,  mức độbài học
Đã khóa
Canh giữa các phần tử
Canh giữa các phần tử
Bình luận
  • Phổ biến
  • Mới
Bạn phải đăng nhập để đăng nhận xet
Trang này chưa có bất kỳ bình luận nào