mozilla

Revision 310829 of align

  • Revision slug: XUL/Attribute/align
  • Revision title: align
  • Revision id: 310829
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{ XULRefAttr() }}
{{ XULAttr("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 is used to specify how its children are 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 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 is used to specify how its children are 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 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>
Revert to this revision