如何使用 JavaScript 设置元素中内容的垂直对齐方式?
在本教程中，我们将学习如何使用 JavaScript 设置元素中内容的垂直对齐方式。
HTML DOM 样式的 vertical-align 属性用于设置元素中内容的垂直对齐方式。
vertical-align 属性指定或返回元素内容的垂直对齐方式。vertical-align 属性控制内联块或表格单元格框的垂直对齐方式。vertical-align 属性用于垂直对齐内联元素的框及其行框。例如，它可用于垂直排列一行文本内的图片。它还用于垂直对齐表格单元格的内容。
Vertical-align 仅适用于 inline、inline-block 和 table-cell 元素；它不能用于对齐 block-level 组件。
使用样式 verticalAlign 属性
verticalAlign 属性设置或检索内容的垂直对齐方式。top 属性将元素及其后代的顶部与整行的顶部对齐。
语法
document.getElementById("myTable").style.verticalAlign="top";
使用 getElementById() 方法获取表元素的 id，并将文本的垂直对齐设置为框的顶部。
示例
我们在此示例中使用宽度和高度组件来构建一个带有实心蓝色边框的框。框中写入了特定的文本。根据默认设置，文本居中对齐。vertical-align 属性的 top 属性用于将其更改为框的顶部。
<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>
在 verticalAlign 属性中使用不同的值
verticalAlign 属性指定或返回元素内容的垂直对齐方式。元素通过 middle 属性定位在父元素的中心。bottom 属性将元素的底部与行中的最低元素对齐。
语法
document.getElementById("myTable").style.verticalAlign="middle";
document.getElementById("myTable2").style.verticalAlign="bottom";
使用 getElementById() 函数获取表格元素的 id，并将文本的垂直对齐设置为框的中间和底部。
示例
在此示例中，我们使用宽度和高度组件构造了一个带有实心绿色边框的框。框中写入了特定的文本。根据默认设置，使用 JavaScript 中的 vertical-align 属性将文本居中对齐。单击按钮时，表格元素中的文本将设置为底部值。
<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>
使用 Bootstrap 设置垂直对齐
Bootstrap 是一套用于构建响应式网站和在线应用的免费开源工具。它是用于创建移动优先、响应式网站的最广泛使用的 HTML、CSS 和 JavaScript 框架。如今，网页针对所有浏览器(IE、Firefox 和 Chrome)和屏幕尺寸(桌面、平板电脑、平板手机和手机)进行了优化。
Bootstrap 中的垂直对齐使用垂直对齐实用程序更改项目的垂直对齐。垂直对齐实用程序仅影响内联(在一行中呈现)、内联块(在一行中呈现为块)、内联表和表单元格(表单元格中的元素)元素。
语法
<span class="align-baseline">Hello</span> <span class="align-top">This</span> <span class="align-middle">is</span>
使用 Bootstrap align 属性，将类描述为基线、顶部或中间。
示例
在此示例中，我们创建了一个 div 元素。将文本添加到类元素中，并相应地更改内容的对齐方式，首先更改为基线，然后更改为顶部、中间和底部。以下文本内容更改为 text-top 和 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>
在本教程中，我们学习了如何使用 JavaScript 设置元素中内容的垂直对齐方式。vertical-align 属性用于完成此任务。本教程讨论了 top、middle 和 bottom 属性。还讨论了使用 Bootstrap 的垂直对齐方式。
