Style alignSelfProperty
Style ObjectExamples
Center-align an item within a flexible element:
document.getElementById("myDIV").style.alignSelf="center";
Try it Yourself »
Definition and Usage
The alignSelf property specifies the alignment of the selected item within a flexible container.
Note:The alignSelf property can override the alignItems property of the flexible container.
Browser Support
Firefox, Opera, and Chrome support the alignSelf property.
Syntax
Return the alignSelf property:
object.style.alignSelf
Set the alignSelf property:
object.style.alignSelf="auto|stretch|center|flex-start|flex-end|baseline|initial|inherit"
Property Values
| Value | Description |
|---|---|
| auto | Default value. The element inherits the align-items property of its parent container. If there is no parent container, it is "stretch". |
| stretch | The element is stretched to fit the container. |
| center | The element is positioned at the center of the container. |
| flex-start | The element is positioned at the start of the container. |
| flex-end | The element is positioned at the end of the container. |
| baseline | The element is positioned on the baseline of the container. |
| initial | Sets the property to its default value. Seeinitial。 |
| inherit | Inherits the property from the parent element. Seeinherit。 |
Technical Details
| Default value: | auto |
|---|---|
| Return value: | A string representing the element's align-self property. |
| CSS Version | CSS3 |
Related Articles
CSS Reference Manual:align-self Property
HTML DOM STYLE Reference Manual:alignContent Property
HTML DOM STYLE Reference Manual:alignItems Property
Other Extensions