The vertical-align property in CSS is used to specify the vertical alignment of the table-box or inline element.
Syntax:
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom |text-bottom|initial|inherit;
Note:
- This property is mostly used to align images to it’s corresponding text.
- This property can also be used to align the cells inside tables.
- The vertical-align property cannot be used for the alignment of block level elements like p, ol, ul, h1, div etc.
Property Values:
- baseline: It aligns the element baseline corresponding to the baseline of the parent. This might vary according to the browser. It is the default value.
- sub: It aligns the element baseline corresponding to the subscript-baseline of its parent.
- super: It aligns the element baseline corresponding to the superscript-baseline of its parent.
- text-top: It aligns the element top corresponding to the top of the parent’s font.
- text-bottom: Align the element’s bottom corresponding to the bottom of the parent’s font.
- middle: Aligns the element’s middle corresponding to the middle of the parent.
- top: Aligns the element’s top corresponding to the top of the tallest element on it’s line.
- bottom: Aligns the element’s bottom corresponding to the top of the shortest element on it’s line.
- length: Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.
- percentage: Aligns the element’s baseline corresponding to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property.
- initial: Initializes the value to the default value.
- inherit: Inherits the value from the parent element.
Example: This example explains all the values of vertical-align property.
HTML
<!DOCTYPE html> < html >
< head >
< title >
CSS vertical-align Property
</ title >
< style >
.img1 {
vertical-align: baseline;
}
.img2 {
vertical-align: sub;
}
.img3 {
vertical-align: super;
}
.img4 {
vertical-align: text-top;
}
.img5 {
vertical-align: text-bottom;
}
.img6 {
vertical-align: middle;
}
.img7 {
vertical-align: top;
}
.img8 {
vertical-align: bottom;
}
.img9 {
vertical-align: 25px;
}
img.img10 {
vertical-align: 100%;
}
.img11 {
vertical-align: baseline;
}
.img12 {
vertical-align: inherit;
}
</ style >
</ head >
< body >
< h2 >vertical-align: baseline</ h2 >
< p >
< img class = "img1" src =
alt = "" class = "alignnone size-medium wp-image-862984" />
A computer science portal
</ p >< br >
< h2 >vertical-align: sub</ h2 >
< p >
< img class = "img2" src =
alt = "" class = "alignnone size-medium wp-image-862984" />
A computer science portal
</ p >< br >
< h2 >vertical-align: super</ h2 >
< p >
< img class = "img3" src =
alt = "" class = "alignnone size-medium wp-image-862984" />
A computer science portal
</ p >< br >
< h2 >vertical-align: text-top</ h2 >
< p >
< img class = "img4" src =
alt = "" class = "alignnone size-medium wp-image-862984" />
A computer science portal
</ p >< br >
< h2 >vertical-align: text-bottom</ h2 >
< p >
< img class = "img5" src =
alt = "" class = "alignnone size-medium wp-image-862984" />
A computer science portal
</ p >< br >
< h2 >vertical-align: middle</ h2 >
< p >
< img class = "img6" src =
alt = "" class = "alignnone size-medium wp-image-862984" />
A computer science portal
</ p >< br >
< h2 >vertical-align: top</ h2 >
< p >
< img class = "img7" src =
alt = "" class = "alignnone size-medium wp-image-862984" />
A computer science portal
</ p >< br >
< h2 >vertical-align: bottom</ h2 >
< p >
< img class = "img8" src =
alt = "" class = "alignnone size-medium wp-image-862984" />
A computer science portal
</ p >< br >
< h2 >vertical-align: length</ h2 >
< p >
< img class = "img9" src =
alt = "" class = "alignnone size-medium wp-image-862984" />
A computer science portal
</ p >< br >
< h2 >vertical-align: percentage</ h2 >
< p >
< img class = "img10" src =
alt = "" class = "alignnone size-medium wp-image-862984" />
A computer science portal
</ p >< br >
< h2 >vertical-align: initial</ h2 >
< p >
< img class = "img11" src =
alt = "" class = "alignnone size-medium wp-image-862984" />
A computer science portal
</ p >< br >
< h2 >vertical-align: inherit</ h2 >
< p >
< img class = "img12" src =
alt = "" class = "alignnone size-medium wp-image-862984" />
A computer science portal
</ p >
</ body >
</ html >
|
Output:
Supported Browsers: The browser supported by vertical-align property are listed below:
- Chrome 1.0
- Edge 12.0
- Firefox 1.0
- Internet Explorer 4
- Safari 1.0
- Opera 4.0