Revision Content

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 {{ Deprecated_inline() }}

The elements are aligned on their left edges.

center {{ Deprecated_inline() }}

The elements are centered horizontally.

right {{ Deprecated_inline() }}

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 {{ Cssxref("-moz-box-align") }}.

Revision Source

<div class="noinclude">
{{ XULRefAttr() }}</div>
<dl>
<dt>
{{ XULAttr("align") }}</dt>
<dd>
Type: <em>one of the values below</em></dd>
<dd>
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.
<ul>
<li>For boxes that have horizontal orientation, it specifies how its children will be aligned vertically.</li>
<li>For boxes that have vertical orientation, it specifies how its children will be aligned horizontally.</li>
</ul>
</dd>
<dd>
<dl>
<dt>
<code>start</code></dt>
<dd>
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.</dd>
<dt>
<code>center</code></dt>
<dd>
Extra space is split equally along each side of the child elements, resulting in the children being placed in the center of the box.</dd>
<dt>
<code>end</code></dt>
<dd>
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.</dd>
<dt>
<code>baseline</code></dt>
<dd>
This value applies to horizontally oriented boxes only. It causes the child elements to be aligned so that their text labels are lined up.</dd>
<dt>
<code>stretch</code></dt>
<dd>
<em>This is the default value.</em> 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.</dd>
<dt>
<code>left</code> {{ Deprecated_inline() }}</dt>
<dd>
The elements are aligned on their left edges.</dd>
<dt>
<code>center</code> {{ Deprecated_inline() }}</dt>
<dd>
The elements are centered horizontally.</dd>
<dt>
<code>right</code> {{ Deprecated_inline() }}</dt>
<dd>
The elements are aligned on their right edges.</dd>
</dl>
</dd>
<dd>
The <a href="/en-US/docs/XUL/Attribute/pack" title="XUL/Attribute/pack">pack</a> 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 {{ Cssxref("-moz-box-align") }}.</dd>
</dl>