CSS Vertical Align
The CSS vertical-align property is used to set the vertical alignment of an inline element or a table-cell. It is a straightforward property in CSS, but it can be tricky for beginners to understand and use correctly.
What is does
- The vertical-align property is used for inline or inline-block elements.
- It changes how the element is aligned, not its content (except for table cells).
- In table cells, it adjusts the alignment of the content inside the cell, not the cell itself.
CSS Vertical Align Values
CSS Vertical Align Example
<!DOCTYPE html>
<html>
<head>
<style>
img.text-top {
vertical-align: text-top;
}
img.text-bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p>
<img src="img.jpg" alt="Good Morning">
This is an image with default alignment.
</p>
<p>
<img src="img1.jpg" class="text-top" alt="Good Morning ">
This is an image with text-top alignment.
</p>
<p>
<img src="img2.jpg" class="text-bottom" alt="Good Morning ">
This is an image with text-bottom alignment.
</p>
</body>
</html>
