HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python How to use CSS vertical alignment
Using the vertical-align property allows you to set CSS vertical alignment for items inside the element:
Example
img.first {
vertical-align: baseline;
}
img.second {
vertical-align: text-top;
}
img.third {
vertical-align: text-bottom;
}
img.fourth {
vertical-align: sub;
}
img.fifth {
vertical-align: super;
}
This property works with inline elements and table cells.
Note: as
vertical-aligndoesn't affect block elements, you cannot use it to vertically align text in div elements. To do that, use Flexbox.
Pros Main Features
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
Pros Main Features
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
Pros Main Features
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
Syntax for vertical-align
To apply CSS vertical alignment, follow the syntax example below:
vertical-align: value;
All the available CSS vertical-align property values will be explained in the table below.
| Value | Description |
|---|---|
baseline |
The default value. Aligns the baseline of the element with the baseline of the parent |
sub |
Aligns the element like subscript |
super |
Aligns the element like superscript |
top |
Aligns the top of the element with the top of the line |
bottom |
Aligns the bottom of the element with the bottom of the line |
text-top |
Aligns the top of the element with the top of the parent's text |
middle |
Aligns the middle of the element with the middle of the parent's lowercase text |
text-bottom |
Aligns the bottom of the element with the bottom of the parent's text |
| Length units | Raises or lowers the element by the value specified (can be positive or negative) |
| Percentages | Raises or lowers the element in relation to the value of line-height (can be positive or negative) |
Browser support
Chrome
1+
Edge
12+
Firefox
1+
IE
4+
Opera
4+
Safari
1+
Mobile browser support
Chrome
18+
Firefox
4+
Opera
All
Safari
1+
