Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
You are here: Reference > CSS > properties > vertical-align

vertical-align property

Browser support:
Specifies how to align an element vertically.
Aligns content vertically, similarly to the deprecated vAlign attribute, but the 'sub' and 'super' values are only supported by text elements.
JavaScript page for this property: verticalAlign. You can find other example(s) there.

Possible values:

 One of the following values: 
auto
The alignment of the element's baseline depends on the value of the layout-flow property.
baseline
Default. Aligns the baseline of the element's text content with the baseline of the parent element.
bottom
Aligns the bottom of the element's text content to the bottom of the object.
height in length
The baseline of the element is aligned to this value above the baseline of the parent. For the supported length units, see the length page.
height in percentage
The height is the specified percentage of the line-height property.
inherit
Takes the value of this property from the computed style of the parent element.
middle
Aligns the vertical midpoint of the text content with the baseline plus half the x-height of the parent box.
sub
Aligns the baseline of the element's text content to the baseline of the parent subscript content.
super
Aligns the baseline of the element's text content to the baseline of the parent superscript content.
text-bottom
Aligns the bottom of the element's text content to the bottom of the parent element's font.
text-top
Aligns the top of the element's text content to the top of the parent element's font.
top
Aligns the top of the element's text content to the top of the object.
Default: baseline.

Example HTML code 1:

This example illustrates the use of the vertical-align property:
<body>
    <table border="2px">
        <tr>
            <td style="vertical-align: middle;">middle aligned text</td>
            <td style="vertical-align: top;">top aligned text</td>
            <td width="40">A long text content to create a higher table cell</td>
        </tr>
    </table>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content