The vertical-align property sets the element's vertical alignment.
Vertical alignment only affects inline, inline-block, and table-cell boxes.
Elements can be aligned at the top, bottom, and some values in between.
An inline image with a vertical-align value of top.
This 
image is aligned to the top
<p>
This <img style="vertical-align: top"
src="/img/css/star.png" />
image is aligned to the top
</p>
vertical-align: baseline | length | sub | super |
top | text-top | middle | bottom |
text-bottom | initial | inherit;
| Value | Description |
|---|---|
| baseline | Default. Aligned with the parent's baseline |
| length | Raises or lowers the element using a specified length |
| % | Raises or lowers the element using a specified percentage |
| sub | Align with the parent's subscript baseline |
| super | Align with the parent's superscript baseline |
| top | Align with the top of the entire line. The highest point. |
| text-top | Align with the top of the parent element's font. |
| middle | Align with the middle of the parent |
| bottom | Align with the bottom of the entire line. The lowest point. |
| text-bottom | Align with the bottom of the parent element's font. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Note: For table-cell boxes only top, middle, and bottom are valid values.
Click the buttons to see the different vertical-align values.
This
image is displayed with a vertical alignment
<style>
.vertical {
vertical-align: baseline;
}
</style>
<p>
This <img class="vertical" src="/img/css/star.png">
image is displayed with a vertical alignment
</p>
This table shows when vertical-align support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
4.0 | Jun 2000 |
 Safari
|
1.0 | Jun 2003 |
