align

This article is in need of a technical review.

align
Type: one of the values below
The align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children.
  • For boxes that have horizontal orientation, it specifies how its children will be aligned vertically.
  • For boxes that have vertical orientation, it specifies how its children will be aligned horizontally.
start
Child elements are aligned starting from the left or top edge of the box. If the box is larger than the total size of the children, the extra space is placed on the right or bottom side.
center
Extra space is split equally along each side of the child elements, resulting in the children being placed in the center of the box.
end
Child elements are placed on the right or bottom edge of the box. If the box is larger than the total size of the children, the extra space is placed on the left or top side.
baseline
This value applies to horizontally oriented boxes only. It causes the child elements to be aligned so that their text labels are lined up.
stretch
This is the default value. The child elements are stretched to fit the size of the box. For a horizontal box, the children are stretched to be the height of the box. For a vertical box, the children are stretched to be the width of the box. If the size of the box changes, the children stretch to fit. Use the flex attribute to create elements that stretch in the opposite direction.
left
The elements are aligned on their left edges.
center
The elements are centered horizontally.
right
The elements are aligned on their right edges.
The pack attribute is related to the alignment but is used to specify the position in the opposite direction. You can also specify the value of align using the style property -moz-box-align.

Document Tags and Contributors

Contributors to this page: Sheppy, pippijn, ethertank, Nickolay, kscarfone, Pmash, MatrixFrog
Last updated by: Sheppy,