vertical-align: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The vertical-align property specifies the vertical alignment.

The vertical alignment of the iframe can be specified by applying this property to the IFRAME element.


#example {
vertical-align: middle;
}
Property Value Explanation
vertical-align baseline aligns to the baseline of the parent element (default)
top aligns to the top of the line
text-top aligns to the top of the parent element's font
middle aligns to the middle of the line
bottom aligns to the bottom of the line
text-bottom aligns to the bottom of the parent element's font
length raises or lowers the element by the length
baseline = 0
positive value : raises
negative value : lowers
% raises or lowers the element by the percentage
baseline = 0% (100% = one line-height)
positive value : raises
negative value : lowers
About the baseline
The baseline

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

iframe {
width: 200px;
height: 130px;
}

#example1 { vertical-align: baseline; }
#example2 { vertical-align: top; }
#example3 { vertical-align: text-top; }
#example4 { vertical-align: middle; }
#example5 { vertical-align: bottom; }
#example6 { vertical-align: text-bottom; }
#example7 { vertical-align: -30px; }
#example8 { vertical-align: 200%; }

</style>

</head>
<body>

<p><iframe src="example.html" id="example1">Alternate content</iframe>baseline</p>

<p><iframe src="example.html" id="example2">Alternate content</iframe>top</p>

<p><iframe src="example.html" id="example3">Alternate content</iframe>text-top</p>

<p><iframe src="example.html" id="example4">Alternate content</iframe>middle</p>

<p><iframe src="example.html" id="example5">Alternate content</iframe>bottom</p>

<p><iframe src="example.html" id="example6">Alternate content</iframe>text-bottom</p>

<p><iframe src="example.html" id="example7">Alternate content</iframe>-30px</p>

<p><iframe src="example.html" id="example8">Alternate content</iframe>200%</p>

</body>
</html>
Output

baseline

top

text-top

middle

bottom

text-bottom

-30px

200%