JS实现控制表格单元格垂直对齐的方法

2023年6月10日下午9:22 • JavaScript

控制表格单元格垂直对齐是前端页面布局中经常遇到的问题。接下来，我将分步骤介绍在JS中实现单元格垂直对齐的方法。

步骤1：在HTML中添加表格代码

首先，我们需要在HTML中添加一个表格。下面是一个简单的表格代码示例：

<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

步骤2：编写JS代码

要实现单元格垂直对齐，我们需要编写JS代码。以下是实现垂直居中对齐的JS代码示例：

 function verticalAlign() {
    var table = document.getElementsByTagName('table')[0];
    var tbody = table.getElementsByTagName('tbody')[0];
    var rows = tbody.getElementsByTagName('tr');
    for (var i = 0; i < rows.length; i++) {
      var cells = rows[i].getElementsByTagName('td');
      for (var j = 0; j < cells.length; j++) {
        cells[j].style.verticalAlign = "middle";
      }
    }
  }

上述代码的作用是将每个单元格的垂直对齐方式设置为居中对齐，从而实现垂直居中对齐。

步骤3：在HTML中添加JS代码

最后，我们需要将JS代码添加到HTML页面中。以下是将JS代码添加到HTML页面的代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>表格垂直对齐示例</title>
  <script type="text/javascript">
    function verticalAlign() {
      var table = document.getElementsByTagName('table')[0];
      var tbody = table.getElementsByTagName('tbody')[0];
      var rows = tbody.getElementsByTagName('tr');
      for (var i = 0; i < rows.length; i++) {
        var cells = rows[i].getElementsByTagName('td');
        for (var j = 0; j < cells.length; j++) {
          cells[j].style.verticalAlign = "middle";
        }
      }
    }
  </script>
</head>
<body onload="verticalAlign();">
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
      </tr>
      <tr>
        <td>内容4</td>
        <td>内容5</td>
        <td>内容6</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

上述代码在文档加载完成后，会自动调用verticalAlign函数，将表格单元格的垂直对齐方式设置为居中对齐。

示例1：水平、垂直居中对齐一个图片

下面是一个示例，展示如何使用verticalAlign函数对一个图片进行水平、垂直居中对齐。请看下面的代码：

<!DOCTYPE html>
<html>
<head>
  <title>居中对齐示例</title>
  <style type="text/css">
    .container{
      height: 200px;
      width: 200px;
      border: 1px solid gray;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img{
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="https://pic4.zhimg.com/v2-4dc8a9dd835d9363f80e7e5b666542c2_b.jpg" width="100" height="100">
  </div>
</body>
</html>

使用div元素包裹了一个宽高为200px的容器，设置容器的宽高、边框、布局属性，然后在该容器内放置了一张图片。然后使用CSS方式设置图片的垂直对齐方式为居中对齐，并使用verticalAlign函数将图片水平、垂直居中对齐。

示例2：多行文字垂直居中对齐

下面是一个示例，展示如何使用verticalAlign函数对一个包含多行文字的div元素进行垂直居中对齐。请看下面的代码：

<!DOCTYPE html>
<html>
<head>
  <title>居中对齐示例</title>
  <style type="text/css">
    .container{
      height: 200px;
      width: 200px;
      border: 1px solid gray;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .content{
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      <p>第一行</p>
      <p>第二行</p>
      <p>第三行</p>
      <p>第四行</p>
    </div>
  </div>
</body>
</html>

使用div元素包裹了一个宽高为200px的容器，设置容器的宽高、边框、布局属性，然后在容器内放置了一个包含多行文字的div元素。使用CSS方式设置该div元素的显示方式为table-cell，然后使用verticalAlign函数将div元素垂直居中对齐。这样，多行文字就可以实现垂直居中对齐了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现控制表格单元格垂直对齐的方法 - Python技术站