Tóm Tắt
CSS
align-self
Property
Example
Center the alignments for one of the items inside a flexible element:
#myBlueDiv
{
align-self: center;
}
Try it Yourself »
Definition and Usage
The align-self
property specifies the alignment for the selected item inside the flexible container.
Note: The align-self
property overrides the flexible container’s
align-items property.
Show demo ❯
Default value:
auto
Inherited:
no
Animatable:
no. Read about animatable
Version:
CSS3
JavaScript syntax:
object.style.alignSelf=”center”
Try it
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- specify the first version that worked with a prefix.
Property
align-self
21.0
11.0
20.0
9.0
7.0 -webkit-
12.1
CSS Syntax
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
Property Values
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
Related Pages
CSS Reference: align-content property
CSS Reference: align-items property
HTML DOM reference: alignSelf property