Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Warning: This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard.
The box-align
CSS property specifies how an element aligns its contents across its layout in a perpendicular direction. The effect of the property is only visible if there is extra space in the box.
See flexbox for information about the current standard.
/* Keyword values */ box-align: start; box-align: center; box-align: end; box-align: baseline; box-align: stretch; /* Global values */ box-lines: inherit; box-lines: initial; box-lines: unset;
The direction of layout depends on the element's orientation: horizontal or vertical.
Initial value | stretch |
---|---|
Applies to | elements with a CSS display value of box or inline-box |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
The box-align
property is specified as one of the keyword values listed below.
Values
start
- The box aligns contents at the start, leaving any extra space at the end.
center
- The box aligns contents in the center, dividing any extra space equally between the start and the end.
end
- The box aligns contents at the end, leaving any extra space at the start.
baseline
- The box aligns the baselines of the contents (lining up the text). This only applies if the box's orientation is horizontal.
stretch
- The box stretches the contents so that there is no extra space in the box.
Formal syntax
start | center | end | baseline | stretch
Examples
<!DOCTYPE html> <html> <head> <title>CSS box-align example</title> <style> div.example { display: box; /* As specified */ display: -moz-box; /* Mozilla */ display: -webkit-box; /* WebKit */ /* Make this box taller than the children, so there is room for the box-pack */ height: 400px; /* Make this box wider than the children so there is room for the box-align */ width: 300px; /* Children should be oriented vertically */ box-orient: vertical; /* As specified */ -moz-box-orient: vertical; /* Mozilla */ -webkit-box-orient: vertical; /* WebKit */ /* Align children to the horizontal center of this box */ box-align: center; /* As specified */ -moz-box-align: center; /* Mozilla */ -webkit-box-align: center; /* WebKit */ /* Pack children to the bottom of this box */ box-pack: end; /* As specified */ -moz-box-pack: end; /* Mozilla */ -webkit-box-pack: end; /* WebKit */ } div.example > p { /* Make children narrower than their parent, so there is room for the box-align */ width: 200px; } </style> </head> <body> <div class="example"> <p>I will be second from the bottom of div.example, centered horizontally.</p> <p>I will be on the bottom of div.example, centered horizontally.</p> </div> </body> </html>
Notes
The edge of the box designated the start for alignment purposes depends on the box's orientation:
Horizontal | top |
---|---|
Vertical | left |
The edge opposite to the start is designated the end.
If the alignment is set using the element's align
attribute, then the style is ignored.
Specifications
- Flexible Box Layout Module (W3C Working Draft) Note: The current state of this specification does not reflect Mozilla's or WebKit's older implementations.
- Old Flexible Box Layout Module Note: Mozilla and WebKit's implementations used to reflect this version of the specification.
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes)-webkit | (Yes)-webkit | (Yes)-moz[1] | No support | (Yes)-webkit | 1.1-khtml 3.0-webkit |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | (Yes)-webkit | No support | ? | 1.0-webkit |
[1] In addition to the -moz
prefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit
prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit
, defaulting to false
. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true
.