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

Javascript Web Development Front End Technology

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

<span class="align-baseline">Hello</span>
<span class="align-top">This</span>
<span class="align-middle">is</span>

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.