如何在 Bootstrap 中垂直居中 table 单元格？

Question

我有一个 bootstrap table，其中某列包含 form-inline。这导致其他列中的内容未垂直居中对齐。（如第一个代码片段所示）如何避免这种情况？

实际上，如果我从 table 中删除 form-inline，一切正常。（如第二个代码片段所示）所以我猜问题出在 table.

中嵌入的 form-inline

/* Fit the table cell width to the contents */

table th,
table td {
  width: 1%;
  white-space: nowrap;
}

.center-screen {
  align-content: center;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>

<body>
  <table class="table table-striped center-screen" style="max-width: 100%">
    <thead>
      <tr>
        <th>Symbol</th>
        <th style="width: 0.01%">Share</th>
        <th>Action</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>NVDA</td>
        <td style="width: 0.01%">1</td>
        <td>
          <form class="form-inline justify-content-center">
            <button type="submit" class="btn btn-danger" name="TSLA" value="Sell">
              <i class="fas fa-minus-circle"></i>
            </button>
            <input type="number" name="quantity" class="form-control" value="1" min="1" max="100" style="width:70px">
            <button type="submit" class="btn btn-primary" name="TSLA" value="Buy">
              <i class="fas fa-plus-circle"></i>
            </button>
          </form>
        </td>
      </tr>
  </table>
</body>

</html>

/* Fit the table cell width to the contents */
table th,
table td {
  width: 1%;
  white-space: nowrap;
}

.center-screen {
  align-content: center;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>

<body>
  <table class="table table-striped center-screen" style="max-width: 100%">
    <thead>
      <tr>
        <th>Symbol</th>
        <th style="width: 0.01%">Share</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>NVDA</td>
        <td style="width: 0.01%">1</td>
      </tr>
  </table>
</body>

</html>

Answer 1

在您的代码中，默认情况下有一种样式可以防止您的 table 垂直居中。

这里是：

.table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

所以你可以覆盖它：
vertical-align: middle;

如何在 Bootstrap 中垂直居中 table 单元格？

How to vertically center table cell in Bootstrap?

html

css

bootstrap-4