Thuộc tính căn chỉnh CSS
Ví dụ
Căn giữa cho tất cả các mục của phần tử <div> linh hoạt:
div
{
display: flex;
align-items: center;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính align-items
chỉ định cách căn chỉnh mặc định cho các mục bên trong hộp chứa flexbox hoặc lưới.
- Trong vùng chứa flexbox, các mục flexbox được căn chỉnh trên trục chéo, theo mặc định là trục dọc (ngược lại với hướng flex).
- Trong vùng chứa lưới, các mục lưới được căn chỉnh theo hướng khối. Đối với các trang bằng tiếng Anh, hướng khối là hướng xuống và hướng nội tuyến là từ trái sang phải.
Để thuộc tính này có bất kỳ hiệu ứng căn chỉnh nào, các mục cần có không gian sẵn có xung quanh chúng theo hướng thích hợp.
Mẹo: Sử dụng thuộc tính align-self
của từng mục để ghi đè thuộc tính align-items
.
Giá trị mặc định: | Bình thường |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | object .style.alignItems="center" Hãy thử nó |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
align-items | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 |
Cú pháp CSS
align-items: normal|stretch| positional alignment |flex-start|flex-end|baseline|initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
normal | Default. Behaves like 'stretch' for flexbox and grid items, or 'start' for grid items with a defined block size. | Demo ❯ |
stretch | Items are stretched to fit the container | Demo ❯ |
center | Items are positioned at the center of the container | Demo ❯ |
flex-start | Items are positioned at the beginning of the container | Demo ❯ |
flex-end | Items are positioned at the end of the container | Demo ❯ |
start | Items are positioned at the beginning of their individual grid cells, in the block direction | |
end | Items are positioned at the end of the their individual grid cells, in the block direction | |
baseline | Items are positioned at the baseline of the container | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Các mục được định vị ở đầu vùng chứa:
div {
display: flex;
align-items: flex-start;
}
Hãy tự mình thử »Ví dụ
Các mục được đặt ở cuối container:
div {
display: flex;
align-items: flex-end;
}
Hãy tự mình thử »Ví dụ
Các mục được định vị ở đường cơ sở của vùng chứa:
div {
display: flex;
align-items: baseline;
}
Hãy tự mình thử »Ví dụ
Các mặt hàng được kéo dài để vừa với thùng chứa:
div {
display: flex;
align-items: stretch;
}
Hãy tự mình thử »Ví dụ với lưới
Các mục được căn chỉnh ở đầu mỗi ô lưới theo hướng khối:
#container {
display: grid;
align-items: start;
}
Hãy tự mình thử »Ví dụ với định vị tuyệt đối
Các mục được căn chỉnh ở cuối mỗi ô lưới theo hướng khối cho các mục lưới được định vị tuyệt đối:
#container {
display: grid;
position: relative;
align-items: end;
}
#container > div {
position: absolute;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Lưới CSS
Hướng dẫn CSS: CSS flexbox
Tham khảo CSS: thuộc tính căn chỉnh nội dung
Tham khảo CSS: thuộc tính tự căn chỉnh
Tham khảo CSS: thuộc tính biện minh cho nội dung
Tham khảo CSS: thuộc tính justify-items
Tham khảo CSS: thuộc tính justify-self
Tham chiếu DOM HTML: thuộc tính AlignItems