CSS vertical-align PropertyS2C Home « CSS vertical-align Property
Definition
The CSS vertical-align property allows us to specify the vertical alignment of an element.
Applies To
All inline-level and table-cell elements.
Property Values
negative values are acceptable when using the CSS vertical-align property..
baseline - Align the baseline of the current elements box with the baseline of its parent element box.
bottom - Align the bottom of the element with the lowest element on the line.
inherit - The element will inherit the vertical-align property of its parent element.
length - Defines a length value in a unit measurement such as em or pixel, for raising or lowering the current elements baseline. A value of 0 equates to using the baseline keyword.
middle - Align the vertical midpoint of the current element, half way up from the baseline of the parent element.
sub - Lowers the baseline of the current elements box to the position of subscripts relative to the parent element.
super - Raises the baseline of the current elements box to the position of superscripts relative to the parent element.
text-bottom - Align the bottom of the element with the bottom of the parent element font.
text-top - Align the top of the element with the top of the parent element font.
top - Align the top of the element with the highest element on the line.
n% - Raise or lower the baseline of the box by a percentage value where n is a number. A value of 0% is equates to using the baseline keyword.
Default Value
Default value is set to baseline which aligns the baseline of the current elements box with the baseline of its parent element box.
Inheritance
The vertical-align property is NOT inherited from the parent element unless specified using the inherit property value.
Browser Anomalies
IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.
When the box contains more than one font size, user agents may determine the normal line-height by using the largest font-size used.
Example
<!DOCTYPE html>
<!-- Our HTML/CSS for the CSS vertical-align property follows -->
<html lang="en">
<head>
<title>CSS Reference - CSS vertical-align Property</title>
<!-- Valid values for CSS vertical-align Property are:
baseline, bottom. inherit, middle, sub, super, text-bottom,
text-top, top, length and percentage value.
-->
<style type="text/css">
#img1 {
vertical-align: text-top;
}
#img2 {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<h1>CSS vertical-align Property</h1>
<h2>Image with vertical-align of text-top</h2>
<p>
<img id="img1" src="https://server2client.com/images/fishpiesmall.jpg"
alt="Fish Pie">Look at the vertical alignment of the text.</p>
<h2>Image with vertical-align of text-bottom</h2>
<p>
<img id="img2" src="https://server2client.com/images/fishpiesmall.jpg"
alt="Fish Pie">Look at the vertical alignment of the text.</p>
</body>
</html>
How It Looks
The results of using the vertical-align property with the values above will look something like the following:
Relevant CSS Tutorial
CSS Intermediate Tutorials - Lesson 2 - A Final Look At The Box Model
Homepage
Top