CSS Vertical-Align Property- The Ultimate Guide

The Basics of CSS Vertical-Align Property

If you are a web developer, you must have come across a situation where you want to align text or images vertically. While horizontal alignment can be achieved easily, vertical alignment is a bit challenging. This is where the CSS vertical-align property comes into play. The vertical-align property is used to set the vertical alignment of inline-level elements like text and images.

Before we delve deeper into the vertical-align property, let's understand the difference between block-level and inline-level elements. Block-level elements start on a new line and take up the full width of the parent container. Examples of block-level elements include <div>, <p>, and <h1> to <h6>. On the other hand, inline-level elements are placed inline with the text and do not break the flow of the content. Examples of inline-level elements include <a>, <span>, and <img>.

The vertical-align property only works on inline-level elements. It does not work on block-level elements or on table cells. If you want to align block-level elements vertically, you need to use other CSS properties like display, margin, and padding.

The Syntax of CSS Vertical-Align Property

The syntax of the vertical-align property is relatively simple:

selector {
  vertical-align: value;
}

The selector can be any inline-level element, and the value can be one of the following:

• baseline: This is the default value and aligns the element with the baseline of the parent element.
• top: Aligns the element with the top of the parent element.
• middle: Aligns the element with the middle of the parent element.
• bottom: Aligns the element with the bottom of the parent element.
• text-top: Aligns the element with the top of the parent element's font.
• text-bottom: Aligns the element with the bottom of the parent element's font.
• sub: Aligns the element as a subscript of the parent element.
• super: Aligns the element as a superscript of the parent element.

You can also use length or percentage values to set the vertical alignment. For example, vertical-align: 10px; will align the element 10 pixels below the baseline of the parent element.

Using CSS Vertical-Align Property on Images

The CSS vertical-align property is commonly used to align images vertically. Let's say you have an inline-level image with text on either side, and you want to align the image vertically with the text. You can achieve this using the vertical-align property:

img {
  vertical-align: middle;
}

This will align the image vertically with the middle of the text. You can also use other values like top, bottom, or text-top depending on your requirements.

It is important to note that the vertical-align property does not work on block-level images. If you want to align a block-level image vertically, you need to use other CSS properties like display, margin, and padding.

Using CSS Vertical-Align Property on Text

The CSS vertical-align property can also be used to align text vertically. Let's say you have a line of text with a superscript or subscript, and you want to align the superscript or subscript with the rest of the text. You can achieve this using the vertical-align property:

sup, sub {
  vertical-align: baseline;
}

This will align the superscript or subscript with the baseline of the rest of the text. You can also use other values like middle, top, or bottom depending on your requirements.

Using CSS Vertical-Align Property with Tables

The CSS vertical-align property can also be used with tables. When you have a table cell with text or images, you can use the vertical-align property to align them vertically. Here's an example:

td {
  vertical-align: middle;
}

This will align the content of the table cell vertically with the middle of the cell. You can also use other values like top, bottom, or text-top depending on your requirements.

Conclusion

The CSS vertical-align property is a powerful tool for aligning inline-level elements vertically. It is commonly used for aligning images and text. By understanding the basics of the vertical-align property and its syntax, you can use it to create visually appealing web pages that are easy to read and navigate.