mozilla

Revision 24601 of vertical-align

  • Revision slug: CSS/vertical-align
  • Revision title: vertical-align
  • Revision id: 24601
  • Created:
  • Creator: DBaron
  • Is current revision? No
  • Comment /* Values */ separate out top and bottom

Revision Content

{{template.CSSRef()}}

Summary

The vertical-align property sets the vertical alignment of an inline or table-cell element.

  • Inherited: No

Values

Most of the values vertically align the element relative to its parent element:

baseline
The element is placed on the baseline of the parent element
sub
Aligns the element as it was subscript
super
Aligns the element as it was superscript
text-top
The top of the element is aligned with the top of the parent element's font
middle
The element is placed in the middle of the parent element
text-bottom
The bottom of the element is aligned with the bottom of the parent element's font
<length> 
Align the element at the given length above where it would be for the baseline value
<percentage> 
Like length values, with the percentage being a percent of the {{template.Cssxref("line-height")}} property

However, two values vertically align the element relative to the entire line rather than relative to its parent:

top
The top of the element is aligned with the top of the tallest element on the line
bottom
The bottom of the element is aligned with the lowest element on the line

Negative values are allowed.

Examples

img {
	vertical-align: bottom;
}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The vertical-align property sets the vertical alignment of an inline or table-cell element.
</p>
<ul><li> Inherited: No
</li></ul>
<h3 name="Values"> Values </h3>
<p>Most of the values vertically align the element relative to its parent element:
</p>
<dl><dt>baseline 	</dt><dd>The element is placed on the baseline of the parent element
</dd><dt>sub 		</dt><dd>Aligns the element as it was subscript
</dd><dt>super 		</dt><dd>Aligns the element as it was superscript
</dd><dt>text-top 	</dt><dd>The top of the element is aligned with the top of the parent element's font
</dd><dt>middle		</dt><dd>The element is placed in the middle of the parent element
</dd><dt>text-bottom 	</dt><dd>The bottom of the element is aligned with the bottom of the parent element's font
</dd><dt>&lt;length&gt; </dt><dd>Align the element at the given length above where it would be for the <code>baseline</code> value
</dd><dt>&lt;percentage&gt; </dt><dd>Like length values, with the percentage being a percent of the {{template.Cssxref("line-height")}} property
</dd></dl>
<p>However, two values vertically align the element relative to the entire line rather than relative to its parent:
</p>
<dl><dt>top 		</dt><dd>The top of the element is aligned with the top of the tallest element on the line
</dd><dt>bottom		</dt><dd>The bottom of the element is aligned with the lowest element on the line
</dd></dl>
<p>Negative values are allowed.
</p>
<h3 name="Examples"> Examples </h3>
<pre>img {
	vertical-align: bottom;
}
</pre>
Revert to this revision