CSS vertical-align Property

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>

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.

ValueExplanation
baselineAligns the baseline of the element with the baseline of its parent.
subAligns the baseline of the element with the subscript-baseline of its parent.
superAligns the baseline of the element with the superscript-baseline of its parent.
text-topAligns the top of the element with the top of the parent element's font.
middleAligns the element in the middle of its parent.
text-bottomAligns the bottom of the element with the bottom of the parent element's font.
lengthAllows 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>

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>

Reminder

Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in CSS.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author