mozilla

Revision 24600 of vertical-align

  • Revision slug: CSS/vertical-align
  • Revision title: vertical-align
  • Revision id: 24600
  • Created:
  • Creator: DBaron
  • Is current revision? No
  • Comment /* Values */ fix length and percentage

Revision Content

{{template.CSSRef()}}

Summary

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

  • Inherited: No

Values

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
top
The top of the element is aligned with the top of the tallest element on the line
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
bottom
The bottom of the element is aligned with the lowest element on the line
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

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>
<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>top 		</dt><dd>The top of the element is aligned with the top of the tallest element on the line
</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>bottom		</dt><dd>The bottom of the element is aligned with the lowest element on the line
</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>Negative values are allowed.
</p>
<h3 name="Examples"> Examples </h3>
<pre>img {
	vertical-align: bottom;
}
</pre>
Revert to this revision