CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



vertical-align

CSS is a powerful tool for designing and styling web pages. One of the most important properties in CSS is the vertical-align property. This property is used to align elements vertically within a container. In this article, we will discuss the vertical-align property in detail and provide some code examples to help you understand how it works.

Brief Explanation of Vertical-Align

The vertical-align property is used to align elements vertically within a container. This property can be applied to inline-level and table-cell elements. The default value of vertical-align is baseline, which aligns the baseline of the element with the baseline of the parent element. However, there are several other values that can be used to align elements in different ways.

The following are the different values that can be used with the vertical-align property:

  • baseline: Aligns the baseline of the element with the baseline of the parent element.
  • sub: Aligns the element as if it were a subscript of the parent element.
  • super: Aligns the element as if it were a superscript of the parent element.
  • top: Aligns the top of the element with the top of the parent element.
  • middle: Aligns the middle of the element with the middle of the parent element.
  • bottom: Aligns the bottom of the element with the bottom of the parent element.
  • 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.

Code Examples

Let's take a look at some code examples to see how the vertical-align property works.

Example 1: Baseline Alignment

In this example, we have two inline-level elements within a container. The first element has a font size of 24px and the second element has a font size of 16px. By default, both elements are aligned to the baseline of the container.

  
    <div>
      <span style="font-size: 24px;">Hello</span>
      <span style="font-size: 16px;">World</span>
    </div>
  
Hello World

Example 2: Top Alignment

In this example, we have two inline-level elements within a container. The first element has a font size of 24px and the second element has a font size of 16px. We have applied the value top to the vertical-align property of the second element, which aligns it to the top of the container.

  
    <div>
      <span style="font-size: 24px;">Hello</span>
      <span style="font-size: 16px; vertical-align: top;">World</span>
    </div>
  
Hello World

Example 3: Middle Alignment

In this example, we have two inline-level elements within a container. The first element has a font size of 24px and the second element has a font size of 16px. We have applied the value middle to the vertical-align property of the second element, which aligns it to the middle of the container.

  
    <div>
      <span style="font-size: 24px;">Hello</span>
      <span style="font-size: 16px; vertical-align: middle;">World</span>
    </div>
  
Hello World

Example 4: Bottom Alignment

In this example, we have two inline-level elements within a container. The first element has a font size of 24px and the second element has a font size of 16px. We have applied the value bottom to the vertical-align property of the second element, which aligns it to the bottom of the container.

  
    <div>
      <span style="font-size: 24px;">Hello</span>
      <span style="font-size: 16px; vertical-align: bottom;">World</span>
    </div>
  
Hello World

Example 5: Subscript Alignment

In this example, we have a table-cell element with a font size of 24px. We have applied the value sub to the vertical-align property, which aligns the element as if it were a subscript of the parent element.

  
    <table>
      <tr>
        <td style="font-size: 24px; vertical-align: sub;">H</td>
        <td style="font-size: 16px;">2O</td>
      </tr>
    </table>
  
H 2O

Example 6: Superscript Alignment

In this example, we have a table-cell element with a font size of 24px. We have applied the value super to the vertical-align property, which aligns the element as if it were a superscript of the parent element.

  
    <table>
      <tr>
        <td style="font-size: 24px; vertical-align: super;">x</td>
        <td style="font-size: 16px;">2</td>
      </tr>
    </table>
  
x 2

Conclusion

The vertical-align property is a powerful tool for aligning elements vertically within a container. By using the different values of this property, you can align elements in different ways to create unique and visually appealing designs. We hope this article has helped you understand the vertical-align property in CSS and how it can be used to create beautiful web pages.

References

Activity