HTML | DOM Style verticalAlign Property
This property is used to set or return the vertical alignment of the content in an element.
Syntax:
- Return VerticalAlign :
object.style.verticalAlign
- Set VerticalAlign :
object.style.verticalAlign = value
Properties:
Value | Description |
---|---|
length | It is used to raise or lower an element by some given length. |
% | It is used to raise or lower an element in percentage of the “line-height” property. |
baseline | It is the default property, which is used to align the baseline of the element with the baseline of the parent element. |
sub | It is used to align the element as a subscript. |
super | It is used to align the element as a superscript. |
top | It is used to align the top of the element with the top of the tallest element on the line. |
text-top | It is used to align the top of the element with the top of the parent element’s font. |
middle | It is used to place the element in the middle of the parent element. |
bottom | It is used to align the bottom of the element, with the lowest element on the line. |
text-bottom | It is used to align the bottom of the element with the bottom of the parent element’s font |
initial | It is used to set VerticalAlign property to its default value. |
inherit | It is used to inherit property values from its parent element. |
Return Value: It is used to return a string, representing the vertical alignment of the content in an element.
Example 1: Showing bottom property
HTML
<!DOCTYPE html> < html > < head > < head > HTML | DOM Style verticalAlign Property </ head > </ head > < body > < h1 > < center > DOM VerticalAlign Property < button onclick = "align()" >Press</ button > </ center > </ h1 > < h3 > Clicking on the 'Press' button will align the text vertically at the bottom. </ h3 > < style > table { border: 4px solid black; height: 200px; width: 600px; } </ style > < table > < tr > < td id = "myTd" > < center > < h1 >w3wiki</ h1 > </ center > </ td > </ tr > </ table > < br > < script > function align() { // Set align bottom. document.getElementById( "myTd").style.verticalAlign = "bottom"; } </ script > </ body > </ html > |
Output:
- Before clicking on the button:
- After clicking on the button:
Example 2: Showing top property
HTML
<!DOCTYPE html> < html > < head > < head > HTML | DOM Style verticalAlign Property </ head > </ head > < body > < h1 > < center > DOM VerticalAlign Property < button onclick = "align()" >Press</ button > </ center > </ h1 > < h3 > Clicking on the 'Press' button will align the text vertically at the top. </ h3 > < style > table { border: 4px solid black; height: 200px; width: 600px; } </ style > < table > < tr > < td id = "myTd" > < h1 > < center >w3wiki</ center > </ h1 > </ td > </ tr > </ table > < br > < script > function align() { // Set align top. document.getElementById( "myTd").style.verticalAlign = "top"; } </ script > </ body > </ html > |
Output:
- Before clicking on the button:
- After clicking on the button:
Example 3: Showing baseline property
HTML
<!DOCTYPE html> < html > < head > < head > HTML | DOM Style verticalAlign Property </ head > </ head > < body > < h1 > < center > DOM VerticalAlign Property < button onclick = "align()" >Press</ button > </ center > </ h1 > < h3 > Clicking on the 'Press' button will align the text vertically with the baseline of the parent. </ h3 > < style > table { border: 4px solid black; height: 200px; width: 600px; } </ style > < table > < tr > < td id = "myTd" > < h1 > < center > w3wiki </ center > </ h1 > </ td > </ tr > </ table > < br > < script > function align() { // Set align baseline document.getElementById( "myTd").style.verticalAlign = "baseline"; } </ script > </ body > </ html > |
Output:
- Before clicking on the button:
- After clicking on the button:
Example 4: Showing initial property
HTML
<!DOCTYPE html> < html > < head > < head > HTML | DOM Style verticalAlign Property </ head > </ head > < body > < h1 > < center > DOM VerticalAlign Property < button onclick = "align()" >Press</ button > </ center > </ h1 > < h3 > Clicking on the 'Press' button will align the text vertically to the initial position. </ h3 > < style > table { border: 4px solid black; height: 200px; width: 600px; } </ style > < table > < tr > < td id = "myTd" > < h1 > < center > w3wiki </ center > </ h1 > </ td > </ tr > </ table > < br > < script > function align() { // Set align initial document.getElementById( "myTd").style.verticalAlign = "initial"; } </ script > </ body > </ html > |
Output:
- Before clicking on the button:
- After clicking on the button:
Example 5: Showing inherit property
HTML
<!DOCTYPE html> < html > < head > < head > HTML | DOM Style verticalAlign Property </ head > </ head > < body > < h1 > < center > DOM VerticalAlign Property < button onclick = "align()" >Press</ button > </ center > </ h1 > < h3 > Clicking on the 'Press' button will align the text vertically to the inherited position. </ h3 > < style > table { border: 4px solid black; height: 200px; width: 600px; } </ style > < table > < tr > < td id = "myTd" > < h1 > < center > w3wiki </ center > </ h1 > </ td > </ tr > </ table > < br > < script > function align() { // Set align inherit document.getElementById( "myTd").style.verticalAlign = "inherit"; } </ script > </ body > </ html > |
Output:
- Before clicking on the button:
- After clicking on the button:
Browser Support: The browsers supported by DOM VerticalAlign Property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 4
- Firefox 1
- Opera 4
- Safari 1