Reactjs 如何垂直对齐 React Bootstrap Table 行中的项目

我希望沿着y轴居中Reaction Bootstrap Table行中的内容.

以下是我目前拥有的代码:

import React from "react";
import { ThreeDots } from "react-bootstrap-icons";

return (
<Table>
  <thead>
    <tr>
      <th>#</th>
      <th>Question</th>
      <th>Answer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Define inflation</td>
      <td>Inflation is the rate of increase ...</td>
      <td><ThreeDots/></td>
    </tr>
  </tbody>
</Table>
);

以下是我try 过的:

import React from "react";
import { ThreeDots } from "react-bootstrap-icons";

return (
<Table>
  <thead>
    <tr>
      <th>#</th>
      <th>Question</th>
      <th>Answer</th>
    </tr>
  </thead>
  <tbody>
    <tr className="d-flex align-items-center">
      <td>1</td>
      <td>Define inflation</td>
      <td>Inflation is the rate of increase ...</td>
      <td><ThreeDots/></td>
    </tr>
  </tbody>
</Table>
);

我在<tr>元素的基础上加上了className="d-flex align-items-center".

但是桌子的边框变得乱七八糟，有人知道我能做些什么来解决这个问题吗？

更新

根据Boostrap doc，我发现使用类align-middle可以将表格单元格的内容垂直居中.

有没有人知道有没有一种可以应用于表行或表以使所有行垂直居中的CSS/Bootstrap样式？