How to Position Web Elements With CSS Vertical Align

CSS provides several alignment properties. The text-align property, limited to block elements and table cells, describes horizontal alignment. In contrast, the vertical-align property only applies to inline elements and table cells.

You can use many different values to control vertical alignment. Some are relative to the parent element, others to elements display on the same horizontal line. Find out exactly how you can use vertical-align in various situations, to achieve accurate positioning.

The Different vertical-align Values

The vertical-align property takes three distinct types of value: keywords, percentages, and lengths. Each value represents a vertical position in a line or relative to the parent (container) element of the targeted element.

The main vertical-align values are:

baseline: positions the target element within the baseline of the parent element.
top: positions the top of the target element with the top of the tallest element in the current line.
middle: centers the target element within its current row.
bottom: positions the bottom of the target element with the bottom of the lowest element in the current line.
sub: positions the target element with the subscript baseline of the parent element.
super: positions the target element at the superscript baseline of the parent element.
text-top: positions the target element at the top of the parent element’s font.
text-bottom: positions the target element with the bottom of the parent element’s font.
percentage (e.g. 20%): positions the baseline of the target element at a point above, below, or on the baseline of the parent element. This value can be negative or positive.
length (e.g. 10em): positions the baseline of the target element at a point above, below, or on the baseline of the parent element. This value can be negative or positive.

A Basic HTML Template

        <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <style>
   table {
       border-collapse: collapse;
       width: 100%;
   }
   
   td, th {
       border: 1px solid black;
   }
   </style>
   
   <title>Document</title>
</head>
   
<body>
   
<div id="container">
   
   <a href="http://google.com">Google Search</a>
   
   <img src="https://source.unsplash.com/jFCViYFYcus/300x150" alt=" image of the forest">
   
   <video width="320" controls>
       <source src="videos/ocean_view.mov" type="video/mp4">

       Video of the ocean.
   </video>
   
   <table>
       <tr>
           <th>Scenery</th>
           <th>Discription</th>
       </tr>
       
       <tr>
           <td>Forest</td>
           <td>Lorem ipsum dolor sit amet.</td>
       </tr>
       
       <tr>
           <td>Ocean</td>
           <td>Lorem ipsum dolor sit amet.</td>
       </tr>
   </table>
   
</div>
   
</body>
   
</html>

The HTML code above creates a simple web page that displays four elements: linked text, an image, an embedded video, and a table. It should look like this in your browser:

How to Vertically Align Text

By default, most text elements (such as headings, <p>, and <li> tags) are block elements. The only way to vertically align these elements is to first convert them to inline elements, using the display property.

However, some text elements such as the <a> and <span> tag are inline. As a result, they support the vertical-align property. To vertically align text, simply assign the appropriate value to the CSS vertical-align property.

Using the vertical-align top Value on Text

        a {
   vertical-align: top;
}

Adding the CSS code above to the basic HTML document will align the top of the <a> tag text with the top of the tallest element in the line. Producing the following updated display:

Using the Percentage Value on Text

        a {
    vertical-align: -50%;
}

The CSS above aligns the text element at a position that is 50% below the baseline of the parent element. It produces the following output in your browser:

As you can see in the image above, the text element occupies a position below the image and video elements, which are on the same line. To position this element at or above the baseline, use a positive percentage value.

Using the Length Value on Text

        a {
    vertical-align: 90px;
}

The code above aligns the baseline of the text element at a length of 90px above the baseline of the parent element. This produces the following output in a browser:

How to Vertically Align Images

The <img> tag is an inline element, which the CSS vertical-align property works well with.

Using the vertical-align super Value on Images

        img {
    vertical-align: super;
}

The code above positions the image at the superscript baseline of the parent element. This means at a position above the baseline, as you can see in the following output:

Using the vertical-align Percentage Value on Images

        img {
    vertical-align: 25%;
}

The code above aligns the baseline of the image element at 25% above the baseline of the parent element. This produces the following mirror effect of the super value:

Using the vertical-align Length Value on Images

        img {
    vertical-align: 5px;
}

The code above aligns the baseline of the image element at a position 5px above the baseline of the parent element. This produces an effect similar to that of the super and 25% values:

How to Vertically Align Embedded Media

Embedded media such as videos and iframes are inline HTML elements. Therefore, the CSS vertical-align property works great with them.

Using the vertical-align super Value on a Video

        video {
    vertical-align: sub;
}

The code above positions the video at the subscript baseline of the parent element. This means at a position below the baseline, as you can see in the following output:

Using the vertical-align Percentage Value on a Video

        video {
    vertical-align: -25%;
}

The code above aligns the baseline of the video element at 25% below the baseline of the parent element. This produces the following mirror effect of the sub value:

Using the vertical-align Length Value on a Video

        video {
    vertical-align: -5px;
}

The code above aligns the baseline of the image element at a position 5px below the baseline of the parent element. This produces an effect like the sub and -25% values:

How to Vertically Align Items in a Table

Using the vertical-align property with a table is a little tricky, as a table is a block element. However, the <th> and <td> tags are inline elements. Therefore, you can use the CSS vertical-align property on text within a table.

Using the vertical-align top Value on Table Data

        td {
    height: 40px;
    vertical-align: top;
}

The code above adds a height of 40px to each cell in the table. It then aligns the data in each cell to the top of each row. This produces the following output in the browser:

Using the vertical-align middle Value on Table Data

        td {
    height: 40px;
    vertical-align: middle;
}

The vertical-align middle value in the code above vertically centers the data within each cell. It produces the following output in the browser:

Using the vertical-align bottom Value on Table Data

        td {
    height: 40px;
    vertical-align: bottom;
}

The code above aligns the data in each cell to the bottom of each row. It produces the following output in the browser:

Now You Can Align the Elements on Your Webpage

You can now use the CSS vertical-align property with a host of different inline elements, including text, embedded media, and table data. The general rule is that the vertical-align property only works on inline and inline-block elements.

However, you can use this property on block elements, you just need to convert them to inline or inline-block elements first. Remember that you can combine vertical-align with other alignment properties, such as text-align.