Bài 29: Cách sử dụng Align trong css

Cách sử dụng Align trong css

Align là một thuộc tính trong CSS được sử dụng để căn chỉnh vị trí của một phần tử. Thuộc tính align có thể được sử dụng để căn chỉnh phần tử theo chiều ngang (horizontal) hoặc chiều dọc (vertical), tùy thuộc vào giá trị của thuộc tính.

Có các giá trị chính được sử dụng cho thuộc tính align:

1. left: căn chỉnh phần tử sang bên trái.

2. center: căn chỉnh phần tử vào giữa.

3. right: căn chỉnh phần tử sang bên phải.

4. justify: căn chỉnh phần tử đều các khoảng trống giữa các dòng trong phần tử.

5. top: căn chỉnh phần tử lên trên.

6. middle: căn chỉnh phần tử vào giữa theo chiều dọc.

7. bottom: căn chỉnh phần tử xuống dưới.

Ví dụ, để căn chỉnh một phần tử div vào giữa của một div cha, bạn có thể sử dụng thuộc tính align với giá trị là "center":

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  align-self: center;
}

Ở ví dụ trên, parent div là div cha và child div là div con. Thuộc tính align-items sẽ căn chỉnh child div vào giữa theo chiều dọc trong parent div, trong khi thuộc tính justify-content sẽ căn chỉnh child div vào giữa theo chiều ngang. Thuộc tính align-self được sử dụng để điều chỉnh vị trí của child div nếu cần thiết.

Lưu ý rằng, thuộc tính align đã bị loại bỏ trong phiên bản CSS3 và được thay thế bằng các thuộc tính căn chỉnh flexbox và grid.

Dưới đây là một vài ví dụ về cách sử dụng:

1. Căn chỉnh một phần tử div vào giữa của một div cha:

HTML

<div class="parent">
  <div class="child">Hello, world!</div>
</div>

CSS

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 1px solid black;
}

.child {
  align-self: center;
}

Trong ví dụ này, parent div là div cha và child div là div con. Thuộc tính align-items sẽ căn chỉnh child div vào giữa theo chiều dọc trong parent div, trong khi thuộc tính justify-content sẽ căn chỉnh child div vào giữa theo chiều ngang. Thuộc tính align-self được sử dụng để điều chỉnh vị trí của child div nếu cần thiết. Kết quả sẽ là một hộp chứa có kích thước 200px x 200px, với nội dung "Hello, world!" được căn giữa cả theo chiều ngang và chiều dọc.

2. Căn chỉnh văn bản trong một phần tử div vào giữa theo chiều dọc:

HTML

<div class="parent">
  <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

CSS

.parent {
  height: 200px;
  border: 1px solid black;
  display: flex;
  align-items: center;
}

.child {
  margin: 0;
}

Trong ví dụ này, parent div là div cha và child div là một đoạn văn bản trong thẻ p. Thuộc tính align-items sẽ căn chỉnh đoạn văn bản vào giữa theo chiều dọc trong parent div. Kết quả sẽ là một hộp chứa có kích thước 200px x độ cao của đoạn văn bản, với đoạn văn bản được căn giữa theo chiều dọc.

3. Căn chỉnh một ảnh vào giữa của một div cha:

HTML:

<div class="parent">
  <img src="image.jpg" class="child">
</div>

CSS

.parent {
  height: 200px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  max-width: 100%;
  max-height: 100%;
}

Trong ví dụ này, parent div là div cha và child div là một ảnh được đặt trong thẻ img. Thuộc tính justify-content sẽ căn chỉnh ảnh vào giữa theo chiều ngang trong parent div, trong khi thuộc tính align-items sẽ căn chỉnh ảnh vào giữa theo chiều dọc. Kết quả sẽ là một hộp chứa có kích thước 200px x 200px, với ảnh được căn giữa theo chiều ngang và chiều dọc.