CSS provides several alignment properties. The text-align property, exclusive to block elements and table cells, describes horizontal alignment. In contrast, the vertical-align property only applies to inline elements and table cells.
Various values can be used to control the vertical alignment. Some are related to parent elements, others to elements that appear on the same horizontal line. Find out exactly how to use vertical alignment in different situations to achieve precise alignment.
various vertical alignment values
The vertical-align property takes three different types of values: keywords, percentages, and lengths. Each value represents a vertical position within a row or relative to the target element’s parent (container) element.
The key vertical alignment values are:
- Baseline: Place the target element within the baseline of the parent element.
- top: Positions the top of the target element above the tallest element in the current row.
- middle: Center the target element on the current line.
- bottom: Aligns the bottom of the target element to the bottom of the bottommost element on the current row.
- sub: Positions the target element at the subscript baseline of the parent element.
- super: Place the target element on the superscript baseline of the parent element.
- text-top: Places the target element on top of the parent element’s font.
- text-bottom: Places the target element below the parent element’s font.
- percentage (Example: 20%): Places the baseline of the target element above, below, or above the baseline of the parent element. This value can be negative or positive.
- length (e.g. 10em): Places the baseline of the target element above, below, or above the baseline of the parent element. This value can be negative or positive.
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. Here’s what it looks like in a browser:
How to align text vertically
By default, most text elements (headings,
,and
Use vertically aligned top value in text
a {
vertical-align: top;
}
Adding the above CSS code to a basic HTML document gives Aligns the top of the tag text with the top of the tallest element in the line. produces the following updated display:
Use percentage values in text
a {
vertical-align: -50%;
}
The above CSS positions the text element 50% below the baseline of the parent element. will produce the following output in the browser:
As you can see in the image above, the text element occupies a position below the image and video elements on the same line. Use a positive percentage value to place this element above the baseline.
Use length values in text
a {
vertical-align: 90px;
}
The above code will position the baseline of the text element 90px above the baseline of the parent element. This will produce the following output in your browser:
How to align images vertically
The tag is an inline element and the CSS vertical-align property works well.
Use vertical alignment super value in image
img {
vertical-align: super;
}
The code above positions the image at the superscript baseline of the parent element. This means a position above the baseline, as you can see in the following output.
Use vertical percentage values in images
img {
vertical-align: 25%;
}
The above code will align the baseline of the image element 25% above the baseline of the parent element. This produces the following mirror effect of super values:
Use vertically aligned length values in the image
img {
vertical-align: 5px;
}
The above code will align the baseline of the image element 5px above the baseline of the parent element. This will have a similar effect as the super and 25% values.
Embedded media such as videos and iframes are inline HTML elements. So the CSS vertical-align property works well with them.
Use vertical alignment super value in video
video {
vertical-align: sub;
}
The code above places the video at the subscripted baseline of the parent element. This means a position below the baseline, as you can see in the following output.
Use vertical alignment percentage values in video
video {
vertical-align: -25%;
}
The above code positions the baseline of the video element 25% below the baseline of its parent element. This produces the following mirror effect for subvalues:
Use vertically aligned length values in video
video {
vertical-align: -5px;
}
The above code aligns the baseline of the image element 5px below the baseline of the parent element. This gives an effect like sub with a value of -25%.
How to vertically align items in a table
Using the vertical-align property on a table is a bit tricky, because a table is a block element. however,
tag and A tag is an inline element. Therefore, you can use the CSS vertical-align property for the text inside the table.Use vertically aligned top values in table data
td {
height: 40px;
vertical-align: top;
}
The code above will add a height of 40px to each cell in the table. Then align the data in each cell to the top of each row. This will produce the following output in your browser:
Use vertical median values in table data
td {
height: 40px;
vertical-align: middle;
}
The vertical-align middle value in the code above vertically centers the data in each cell. will produce the following output in the browser:
Use bottom vertical value in table data
td {
height: 40px;
vertical-align: bottom;
}
The above code will align the data in each cell to the bottom of each row. will produce the following output in the browser:
Web page elements can now be aligned
You can now use the CSS vertical-align property on a wide variety of inline elements, including text, embedded media, and table data. As a rule, 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 the block element to an inline or inline block element first. Note that vertical-align can be combined with other alignment properties such as text-align.
