Css style

How to Position Web Elements with CSS Vertical Alignment

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 the elements displayed on the same horizontal line. Find out exactly how you can use vertical alignment in various situations to achieve precise positioning.

The different vertical alignment values

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

The main vertical alignment 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 highest element of the current line.
  • middle: Centers the target element in its current line.
  • bottom: positions the bottom of the target element with the bottom of the lowest element of the current line.
  • sub: positions the target element with the base line in subscript of the parent element.
  • super: positions the target element at the baseline superscript 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 (ex. 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.

USE VIDEO OF THE DAY

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 align text vertically

By default, most text elements (such as headings, tags

and

  • ) are block elements. The only way to align these elements vertically is to convert them to inline elements first, using the display property.

    However, some text elements such as tags and are online. Therefore, they support the vertical alignment property. To align text vertically, simply assign the appropriate value to the vertical-align CSS property.

    Using top value vertically aligned to text

    a {
    vertical-align: top;
    }

    Adding the above CSS code to the base HTML document will align the top of the tag text with the top of the tallest element in the line. Output of the following updated display:

    Using percentage value on text

    a {
    vertical-align: -50%;
    }

    The CSS above aligns the text element at a position 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 length value on text

    a {
    vertical-align: 90px;
    }

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

    How to vertically align images

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

    Using super vertical alignment value on images

    img {
    vertical-align: super;
    }

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

    Using the vertical alignment percentage value on images

    img {
    vertical-align: 25%;
    }

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

    Using vertical alignment length value on images

    img {
    vertical-align: 5px;
    }

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

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

    Using super vertical alignment value on a video

    video {
    vertical-align: sub;
    }

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

    Using the vertical alignment percentage value on a video

    video {
    vertical-align: -25%;
    }

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

    Using the vertical alignment length value on a video

    video {
    vertical-align: -5px;
    }

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

    How to Vertically Align Elements in a Table

    Using the vertical-align property with an array is a bit tricky because an array is a block element. However, the tags

    and are inline elements. Therefore, you can use the vertical-align CSS property on table text.

    Using the upper vertical alignment value on table data

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

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

    Using vertically aligned median value on table data

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

    The center vertical alignment value in the above code vertically centers the data in each cell. It produces the following output in the browser:

    Using vertically aligned lower 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:

    You can now align elements on your webpage

    You can now use the vertical-align CSS 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.


    A typewriter with the word News printed on it

    Align things with the CSS Text Align property

    Read more


    About the Author