CSS vertical-align Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 13 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The vertical-align property in CSS controls how inline elements are aligned vertically relative to their parent element or to the line box.

This property is particularly useful for aligning text and other inline elements within a line of text or within a block container.

💡 Syntax

The syntax for the vertical-align property is straightforward. It can be applied to inline or table-cell elements, and you can specify various alignment values.

Syntax

Copied

element {
  vertical-align: value;
}

🎛️ Default Value

The default value of vertical-align is baseline, which aligns the baseline of the element with the baseline of its parent.

🏠 Property Values

Value	Description
baseline	Aligns the baseline of the element with the baseline of its parent.
top	Aligns the top of the element with the tallest element on the line.
middle	Aligns the middle of the element with the middle of the parent element's font.
bottom	Aligns the bottom of the element with the lowest element on the line.
sub	Aligns the element as subscript relative to the baseline.
super	Aligns the element as superscript relative to the baseline.
text-top	Aligns the top of the element with the top of the parent element's font.
text-bottom	Aligns the bottom of the element with the bottom of the parent element's font.

📄 Example

In this example, we'll use the vertical-align property to align text and images vertically within a line of text.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS vertical-align Example</title>
  <style>
    .inline-img {
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <h1>Vertical Align Text and Image</h1>
  <p>
    <img src="image.png" alt="Example Image" class="inline-img">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</body>
</html>

🖥️ Browser Compatibility

The vertical-align property is well-supported across all major browsers, including Chrome, Firefox, Safari, Edge, and Opera. It behaves consistently across different platforms.

🎉 Conclusion

The vertical-align property is a versatile tool for aligning inline elements vertically within their container.

Whether you're aligning text alongside images, adjusting the positioning of subscripts or superscripts, or fine-tuning the vertical alignment of table cells, understanding and using vertical-align can significantly enhance the layout and presentation of your web content.