vertical-align


                                vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

Initial:	baseline
Applies To:	inline-level and table-cell elements
Inherited:	no
Percentages:	refer to the line-height of the element
Media:	visual

Values
DOM
Example | Values | baseline
Example | Values | bottom
Example | Values | length
Example | Values | middle
Example | Values | percentage
Example | Values | sub
Example | Values | super
Example | Values | text-bottom
Example | Values | text-top
Example | Values | top
Example | DOM | 1
Example | DOM | 2
References


                                vertical-align: value;


Value:	Description:
baseline	Aligns the baseline of the box with the baseline of the parent box
bottom	Aligns the bottom of the aligned subtree with the bottom of the line box
inherit	Takes the same computed value as the property for the element's parent
length	Raises or lowers the box by a fixed measurement from the baseline
middle	Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent
percentage	Raises or lowers the box by a percentage of the line-height from the baseline
sub	Lowers the baseline of the box to the position for subscripts of the parent's box
super	Raises the baseline of the box to the position for superscripts of the parent's box
text-bottom	Aligns the bottom of the box with the bottom of the parent's content area
text-top	Aligns the top of the box with the top of the parent's content area
top	Aligns the top of the aligned subtree with the top of the line box


                                [window.]document.getElementById("element-id").style.verticalAlign = "vertical-align";

Example | Values | text-bottom

Example | Values | text-top

<html>
  <head>
    <title>vertical-align</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">baseline</a>
    <a href="/" onmouseover="mouseover2();">top</a>
    <a href="/" onmouseover="mouseover3();">middle</a>
    <a href="/" onmouseover="mouseover4();">bottom</a><br>
    <table>
      <tr>
        <td id="id1" rowspan="3">vertical-align</td>
        <td id="id2">cell</td>
      </tr>
      <tr>
        <td id="id3">cell</td>
      </tr>
      <tr>
        <td id="id4">cell</td>
      </tr>
    </table>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.verticalAlign = "baseline";
    }
    function mouseover2() {
      document.getElementById("id1").style.verticalAlign = "top";
    }
    function mouseover3() {
      document.getElementById("id1").style.verticalAlign = "middle";
    }
    function mouseover4() {
      document.getElementById("id1").style.verticalAlign = "bottom";
    }
    document.getElementById("id2").style.fontSize = "18pt";
    document.getElementById("id3").style.fontSize = "18pt";
    document.getElementById("id4").style.fontSize = "18pt";
  </script>
</html>

<html>
  <head>
    <title>vertical-align</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">super</a>
    <a href="/" onmouseover="mouseover2();">sub</a>
    <a href="/" onmouseover="mouseover3();">text-top</a>
    <a href="/" onmouseover="mouseover4();">text-bottom</a>
    <a href="/" onmouseover="mouseover5();">percentage</a>
    <a href="/" onmouseover="mouseover6();">length</a><br>
    <p>This is an example to show <span id="id1">vertical-align</span> in a sentence.</p>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.verticalAlign = "super";
    }
    function mouseover2() {
      document.getElementById("id1").style.verticalAlign = "sub";
    }
    function mouseover3() {
      document.getElementById("id1").style.verticalAlign = "text-top";
    }
    function mouseover4() {
      document.getElementById("id1").style.verticalAlign = "text-bottom";
    }
    function mouseover5() {
      document.getElementById("id1").style.verticalAlign = "50%";
    }
    function mouseover6() {
      document.getElementById("id1").style.verticalAlign = "1cm";
    }
    document.getElementById("id1").style.fontSize = "18pt";
  </script>
</html>

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

Values

DOM

Example | Values | baseline

Example | Values | bottom

Example | Values | length

Example | Values | middle

Example | Values | percentage

Example | Values | sub

Example | Values | super

Example | Values | text-bottom

Example | Values | text-top

Example | Values | top

Example | DOM | 1

Example | DOM | 2

References