CSS vertical-align Property

February 10, 2021 12:37 pm IST

You are Here:

CSS vertical-align Property

CSS vertical-align property sets vertical alignment of an inline or table-cell box.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ vertical-align: baseline; } </style> </head> <body> <h1>CSS direction Property</h1> <h2>vertical-align: baseline; (default value)</h2> <div><img src="apple.png">- This is apple.</div> </body> </html>

Run

Syntax

Using CSS

element{ vertical-align: -5px; }

Using Javascript

object.style.verticalAlign="-5px";

Animatable

Yes, vertical-align property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS vertical-align property is baseline.

Property Value

The following table provides a list of values for CSS vertical-align property.

Value	Explanation
baseline	Aligns the baseline of the element with the baseline of its parent.
sub	Aligns the baseline of the element with the subscript-baseline of its parent.
super	Aligns the baseline of the element with the superscript-baseline of its parent.
text-top	Aligns the top of the element with the top of the parent element's font.
middle	Aligns the element in the middle of its parent.
text-bottom	Aligns the bottom of the element with the bottom of the parent element's font.
length	Allows you to define the vertical alignment of the element in any CSS length unit to its parent element. Negative values are accepted.
%	Aligns the baseline of the element to the given percentage above the baseline of its parent element.

All in One

In the following example, we will demonstrate all values of CSS vertical-align property.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #point6{ vertical-align: -45px; } </style> </head> <body> <h1>CSS direction Property</h1> <h2>vertical-align: -45px;</h2> <div><img id="point6" src="apple.png">- This is apple.</div> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS vertical-align property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS vertical-align Property</h1> <div><img src="apple.png">- This is apple.</div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("img")[0]; function myFunction(){ x.style.verticalAlign = "middle"; } </script> </body> </html>

Run