Thuộc tính tự căn chỉnh CSS
Ví dụ
Căn giữa các căn chỉnh cho một trong các mục bên trong phần tử linh hoạt:
#myBlueDiv
{
align-self: 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-self
chỉ định căn chỉnh theo hướng khối cho mục đã chọn bên trong hộp chứa flexbox hoặc lướ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.
Mẹo: Để căn chỉnh một mục lưới theo hướng nội tuyến thay vì hướng khối, hãy sử dụng các thuộc tính justify-self
hoặc justify-items
.
Lưu ý: Thuộc tính align-self
ghi đè thuộc tính align-items
của lưới hoặc vùng chứa linh hoạt.
Giá trị mặc định: | tự độ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.alignSelf="center" Hãy thử |
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-self | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 |
Cú pháp CSS
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
auto | Default. The element inherits its parent container's align-items property, or "stretch" if it has no parent container | Demo ❯ |
stretch | The element is positioned to fit the container | Demo ❯ |
center | The element is positioned at the center of the container | Demo ❯ |
flex-start | The element is positioned at the beginning of the container | Demo ❯ |
flex-end | The element is positioned at the end of the container | Demo ❯ |
baseline | The element is 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ụ
căn chỉnh bản thân trong bố cục lưới
Đặt căn chỉnh ở cuối theo hướng khối cho một mục lưới duy nhất với thuộc tính Align-self:
#container {
display: grid;
}
#myDiv {
align-self: end;
}
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 căn chỉnh các mục
Tham khảo CSS: thuộc tính justify-self
Tham chiếu DOM HTML: thuộc tính AlignSelf