如何使用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.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進行垂直對齊。

更新於：2022年11月9日

834 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.