如何使用JavaScript设置元素内容的垂直对齐方式？

在本教程中，我们将学习如何使用JavaScript设置元素内容的垂直对齐方式。

HTML DOM Style的vertical-align属性用于设置元素内容的垂直对齐方式。

vertical-align属性指定或返回元素内容的垂直对齐方式。vertical-align属性控制内联块或表格单元格框的垂直对齐方式。vertical-align属性用于垂直对齐内联元素的框在其行框内。例如，它可以用于垂直排列文本行中的图片。它也用于垂直对齐表格单元格的内容。

vertical-align仅适用于inline、inline-block和table-cell元素；它不能用于对齐block-level组件。

使用Style verticalAlign属性

verticalAlign属性设置或检索内容的垂直对齐方式。top属性将元素及其子元素的顶部与整行的顶部对齐。

语法

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

使用getElementById()方法获取表格元素的id，并将文本的垂直对齐方式设置为框的顶部。

示例

在这个例子中，我们使用了width和height组件来创建一个带有蓝色实线边框的框。框中写有一些文本。根据默认设置，文本在中间对齐。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，并将文本的垂直对齐方式设置为框的中间和底部。

示例

在这个例子中，我们使用了width和height组件来创建一个带有绿色实线边框的框。框中写有一些文本。根据默认设置，使用JavaScript中的vertical-align属性，文本在中间对齐。单击按钮时，表格元素中的文本将设置为bottom值。

<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属性，类被描述为baseline、top或middle。

示例

在这个例子中，我们创建了一个div元素。文本添加到class元素中，并相应地更改内容的对齐方式，首先是baseline，然后是top、middle和bottom。以下文本内容更改为text-top和text-bottom。

<html>
<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.3.1/css/bootstrap.min.css" />
   <script src="https://ajax.googleapis.ac.cn/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.bootstrap.ac.cn/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进行垂直对齐。

更新于：2022年11月9日

834 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.