Javascript style vertical align

How to set the vertical alignment of the content in an element with JavaScript?

In this tutorial, we will learn how to set the vertical alignment of the content in an element in JavaScript.

The vertical-align property of HTML DOM Style is used to set the vertical alignment of the content in an element.

The vertical-align attribute specifies or returns the vertical alignment of an element’s content. The vertical-align attribute controls the vertical alignment of an inline-block or table-cell box. The vertical-align attribute is used to align the box of an inline element within its line box vertically. It may, for example, be used to arrange a picture within a line of text vertically. It is also used to align the content of a table cell vertically.

Vertical-align only applies to inline, inline-block, and table-cell elements; it cannot be used to align block-level components.

Using the Style verticalAlign Property

The verticalAlign property sets or retrieves the vertical alignment of the content. The top property aligns the top of the element and its descendants with the top of the whole line.

Syntax

document.getElementById("myTable").style.verticalAlign="top";

The id of the table element is fetched using the getElementById() method, and the vertical alignment of the text is set to the top of the box.

Example

We used width and height components in this example to construct a box with a solid blue border. A certain text is written in the box. According to the default setting, the text is aligned in the middle. The top property of the vertical-align attribute is used to change this to the top of the box.

html> head> style> table  border: 3px solid blue; width: 200px; height: 200px; > /style> /head> body> h3> Set the vertical alignment of the content in an element using i>top/i> property /h3> table> tr> td id="myTable"> JavaScript is an ECMAScript-compliant high-level, typically just-in-time compiled language. /td> /tr> /table> br> button type="button" onclick="myFunction()"> Set position /button> script> function myFunction()  document.getElementById("myTable").style.verticalAlign = "top"; > /script> /body> /html> 
 

Using Different Values in verticalAlign Property

The verticalAlign property specifies or returns the vertical alignment of an element’s content. The element is positioned in the center of the parent element via the middle property. The bottom attribute aligns the element’s bottom with the lowest element in the line.

Syntax

document.getElementById("myTable").style.verticalAlign="middle"; document.getElementById("myTable2").style.verticalAlign="bottom";

The table element’s id is obtained using the getElementById() function, and the text’s vertical alignment is set to the middle and bottom of the box.

Example

In this example, we used width and height components to construct a box with a solid green border. A certain text is written in the box. According to the default setting, the text is aligned in the middle using the vertical-align property in JavaScript. The text in the table element is set to the bottom value when the button is clicked.

html> head> style> table  border: 3px solid green; width: 200px; height: 200px; > /style> /head> body> h3> Set the vertical alignment of the content in an element using i> middle & bottom /i> values /h3> table> tr> th id="myTable"> Hi /th> th id="myTable1"> Hello /th> /tr> tr> th id="myTable2"> Namaste /th> th id="myTable3"> How are you /th> /tr> /table> br> button type="button" onclick="myFunction()"> Set position /button> script> function myFunction()  document.getElementById("myTable").style.verticalAlign = "middle"; document.getElementById("myTable1").style.verticalAlign = "middle"; document.getElementById("myTable2").style.verticalAlign = "bottom"; document.getElementById("myTable3").style.verticalAlign = "bottom"; > /script> /body> /html> 
 

Using Bootstrap to set vertical alignment

Bootstrap is a set of free and open-source tools for building responsive websites and online apps. It is the most widely used HTML, CSS, and JavaScript framework for creating mobile-first, responsive websites. Nowadays, webpages are optimized for all browsers (IE, Firefox, and Chrome) and screen sizes (Desktop, Tablets, Phablets, and Phones).

Vertical Alignment in Bootstrap alters the vertical alignment of items using vertical-alignment utilities. Vertical-align utilities only impact inline (Present in a single line), inline-block (Present as blocks on a single line), inline-table, and table cell (Elements in a table cell) elements.

Syntax

Using the Bootstrap align attribute, the class is described to baseline, top, or middle.

Example

In this example, we have created a div element. The text is added to the class element, and the alignment of the content is changed accordingly, first to baseline, then to the top, middle, and bottom. The following text content is changed to text-top and text-bottom.

html> head> link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> /script> script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> /script> script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> /script> /head> body> h3> Set the vertical alignment of the content in an element using i> bootstrap /i> /h3> div class="container"> div class="row align-items-center bg-success text-light" style="min-height: 150px"> div class="col-md-12"> span class="align-baseline"> Hello /span> span class="align-top"> This /span> span class="align-middle"> is /span> span class="align-bottom"> JavaScript /span> span class="align-text-top"> Tutorials /span> span class="align-text-bottom"> Point /span> /div> /div> /div> /body> /html> 
 

In this tutorial, we have learned how to set the vertical alignment of the content in an element using JavaScript. The vertical-align attribute is used to complete this task. The top, middle, and bottom properties are discussed in this tutorial. The vertical alignment using Bootstrap is also discussed.

Источник

Style verticalAlign Property

Set the vertical alignment of some text in a table to «bottom»:

Description

The verticalAlign property sets or returns the vertical alignment of the content in an element.

Browser Support

Syntax

Return the verticalAlign property:

Set the verticalAlign property:

Property Values

Value	Description
length	Raises or lower an element by the specified length. Negative values are allowed
%	Raises or lower an element in a percent of the «line-height» property. Negative values are allowed
baseline	Align the baseline of the element with the baseline of the parent element. This is default
sub	Aligns the element as it was subscript
super	Aligns the element as it was superscript
top	The top of the element is aligned with the top of the tallest element on the line
text-top	The top of the element is aligned with the top of the parent element’s font
middle	The element is placed in the middle of the parent element
bottom	The bottom of the element is aligned with the lowest element on the line
text-bottom	The bottom of the element is aligned with the bottom of the parent element’s font
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	baseline
Return Value:	A String, representing the vertical alignment of the content in an element
CSS Version	CSS1

More Examples

Example

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Javascript Reference — HTML DOM Style verticalAlign Property

The verticalAlign property sets or gets the content vertical alignment.

Browser Support

verticalAlign	Yes	Yes	Yes	Yes	Yes

Syntax

Return the verticalAlign property:

var v = object.style.verticalAlign

Set the verticalAlign property:

object.style.verticalAlign=value

Property Values

Value	Description
length	Set alignment in length unit. Negative values are allowed
%	Set alignment in a percent of the line-height property. Negative values are allowed
baseline	Set the alignment of the element baseline to the baseline of the container element. This is default
sub	as subscript
super	as superscript
top	Align the top of the element with the top of the tallest element on the line
text-top	Align the top of the element with the top of the container element’s font
middle	Align the element in the middle of the parent element
bottom	Align the bottom of the element with the lowest element on the line
text-bottom	Align the bottom of the element with the bottom of the parent element’s font
initial	Set to default value
inherit	Inherit from parent element.

Technical Details

Example

The following code shows how to set the vertical alignment to «bottom».

 !DOCTYPE html> html> head> style> table !--from w w w . j a va 2 s.co m--> border: 1px solid black; height: 100px; >  body> table> tr>td >"myTd">Some example text   button type="button" onclick="myFunction()">test script> function myFunction() < document.getElementById("myTd").style.verticalAlign="bottom"; >   

The code above is rendered as follows:

Example 2

The following code shows how to get the vertical alignment.

 !DOCTYPE html> html> head> style> table !--from www .j a v a 2 s. c o m--> border: 1px solid black; height: 100px; >  body> table> tr>td >"myTd" style="vertical-align:top;">Some example text   button type="button" onclick="myFunction()">test script> function myFunction() < console.log(document.getElementById("myTd").style.verticalAlign); >   

The code above is rendered as follows:

java2s.com | © Demo Source and Support. All rights reserved.

Источник