CSS vertical-align Property: CSS Vertical Align

CSS vertical-align Property: Mastering Vertical Alignment

The CSS vertical-align property specifies the vertical alignment of an inline or table-cell box. It’s a powerful tool for controlling how elements are positioned vertically, especially within inline contexts like text and images, or within table cells. Understanding this property is crucial for creating visually appealing and well-structured web layouts.

Purpose and Definition

The vertical-align property determines how an element is aligned vertically relative to its parent element or the line it sits on. It applies to inline, inline-block, table-cell elements, and is particularly useful for fine-tuning the alignment of text, images, and other inline content.

Syntax

The vertical-align property accepts several keyword values, as well as numerical values with units.

vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;

Values

Here’s a breakdown of the possible values for the vertical-align property:

Examples

Let’s explore some practical examples of how to use the vertical-align property effectively.

Aligning Text with Images

A common use case is aligning an image with surrounding text. By default, images are aligned to the baseline, which can sometimes look awkward.

<style>
  .vertical_align_image {
    vertical-align: middle;
  }
</style>

<p>
  This is some text with an image:
  <img
    src="https://dummyimage.com/20x20/007bff/fff"
    alt="Example Image"
    class="vertical_align_image"
  />
  that is vertically aligned.
</p>

In this example, the image is aligned to the middle of the text line, creating a more balanced appearance. 🖼️

Subscript and Superscript

The sub and super values are used to create subscript and superscript text, respectively.

<style>
  .vertical_align_sub {
    vertical-align: sub;
  }

  .vertical_align_super {
    vertical-align: super;
  }
</style>

<p>
  This is some text with a <span class="vertical_align_sub">subscript</span> and
  a <span class="vertical_align_super">superscript</span>.
</p>

This is useful for mathematical equations or citations.

Aligning Content in Table Cells

The vertical-align property is particularly important for aligning content within table cells.

<style>
  .vertical_align_table {
    border-collapse: collapse;
    width: 300px;
  }

  .vertical_align_table td {
    border: 1px solid black;
    padding: 10px;
  }

  .vertical_align_top {
    vertical-align: top;
  }

  .vertical_align_middle {
    vertical-align: middle;
  }

  .vertical_align_bottom {
    vertical-align: bottom;
  }
</style>

<table class="vertical_align_table">
  <tr>
    <td class="vertical_align_top">Top Aligned</td>
    <td class="vertical_align_middle">Middle Aligned</td>
    <td class="vertical_align_bottom">Bottom Aligned</td>
  </tr>
</table>

This example demonstrates how to align text to the top, middle, and bottom of table cells. 🧮

Using Length Values

You can use length values to fine-tune the vertical position of elements.

<style>
  .vertical_align_length {
    vertical-align: 10px;
  }
</style>

<p>
  This is some text with a <span class="vertical_align_length">raised</span> span.
</p>

This raises the span element by 10 pixels relative to the baseline.

Using Percentage Values

Percentage values are relative to the line-height of the element.

<style>
  .vertical_align_percentage {
    vertical-align: 20%;
  }
</style>

<p>
  This is some text with a
  <span class="vertical_align_percentage">raised</span> span.
</p>

This raises the span element by 20% of the line-height.

Complex Example: Aligning Icons with Text in a Button

Let’s create a more complex example where we align an icon with text within a button.

<style>
  .vertical_align_button {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .vertical_align_button img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
  }
</style>

<button class="vertical_align_button">
  <img src="https://dummyimage.com/20x20/fff/007bff" alt="Icon" />
  Click Me
</button>

Here, we use inline-flex to create a button with an icon and text. The align-items: center property ensures that the items are vertically aligned in the center. The vertical-align: middle property on the image ensures the icon aligns well with the text.

Tips and Considerations

• The vertical-align property only affects inline, inline-block, and table-cell elements.
• Use vertical-align in conjunction with other layout properties like display and line-height for precise control.
• When working with table cells, vertical-align is essential for aligning content correctly.

Browser Support

The vertical-align property is widely supported across all modern browsers. ✅

Conclusion

The CSS vertical-align property is a fundamental tool for controlling the vertical positioning of elements in your web layouts. By understanding its various values and use cases, you can create more polished and visually appealing designs. From aligning text with images to precisely positioning content in table cells, mastering vertical-align is an essential skill for any web developer.