verticalAlign property

Article
05/02/2017

Sets or retrieves the vertical alignment of the object.

Syntax

Integer value = object.put_verticalAlign(Variant v);Integer value = object.get_verticalAlign(Variant* sAlign);

Property values

Type: VARIANT

auto (auto)

Aligns the contents of an object according to the value of the IHTMLCSSStyleDeclaration::layoutFlow attribute.

baseline (baseline)

Default. Aligns the contents of an object supporting IHTMLTableCol::vAlign to the base line.

sub (sub)

Vertically aligns the text to subscript.

super (super)

Vertically aligns the text to superscript.

top

Vertically aligns the contents of an object supporting IHTMLTableCol::vAlign to the top of the object.

middle (middle)

Vertically aligns the contents of an object supporting IHTMLTableCol::vAlign to the middle of the object.

bottom (bottom)

Vertically aligns the contents of an object supporting IHTMLTableCol::vAlign to the bottom of the object.

text-top (text-top)

Vertically aligns the text of an object supporting IHTMLTableCol::vAlign to the top of the object.

text-bottom (text-bottom)

Vertically aligns the text of an object supporting IHTMLTableCol::vAlign to the bottom of the object.

String format

CSS information

Applies To	inline-level and table-cell elements
Media	visual
Inherited	no
Initial Value	baseline

Standards information

CSS 2.1, Section 5.4.4

Remarks

The sub and super values are supported on text. The auto value is supported on the currentStyle object. The other values are supported on objects that support IHTMLTableCol::vAlign.

The auto value is identical to the baseline value when the IHTMLCSSStyleDeclaration::layoutFlow is horizontal. When the IHTMLCSSStyleDeclaration::layoutFlow is vertical-ideographic, the auto value is identical to the middle value.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports IHTMLCSSStyleDeclaration::verticalAlign: middle when IHTMLCSSStyleDeclaration::display is set to inline-block on an element.

Examples

This example uses the IHTMLCSSStyleDeclaration::verticalAlign property to align text within table cells.

<table>
   <tr>
      <td id="top">top</td>
      <td id="middle">middle</td>
      <td id="bottom">bottom</td>
   </tr>
</table>

In the first table cell, the IHTMLCSSStyleDeclaration::verticalAlign property aligns the text to the top, in the second table cell, the IHTMLCSSStyleDeclaration::verticalAlign property aligns text to the middle, and in the third table cell, the IHTMLCSSStyleDeclaration::verticalAlign property aligns text to the bottom.

td {
   height: 100px;
   width: 100px;
   border: 1px solid #000;
}
#top {
   vertical-align: top;
}
#middle {
   vertical-align: middle;
}
#bottom {
  vertical-align: bottom;
}

You can see the three table cells with different text alignment below.

The following example uses the IHTMLCSSStyleDeclaration::verticalAlign property to align text within a paragraph.

<p><span id="baseline">lorem ipsum dolor</span><span id="sub">lorem ipsum dolor</span><span id="super">lorem ipsum dolor</span></p>

Here, each span of text uses the IHTMLCSSStyleDeclaration::verticalAlign property to align the text to the baseline, to subscript, and to superscript.

#baseline {
   vertical-align: baseline;
}
#sub {
   vertical-align: sub;
}
#super {
   vertical-align: super;
}

You can see paragraph of text below.

Requirements

Minimum supported client	Windows XP
Minimum supported server	Windows Server 2003
Header	Mshtml.h
IDL	Mshtml.idl
DLL	Mshtml.dll

Share via