如何垂直对齐表格元素中的元素？答案

【问题标题】：How to vertically align elements in a table element?如何垂直对齐表格元素中的元素？
【发布时间】：2021-09-18 15:55:31
【问题描述】：

我的桌子有些问题。我创建了两个表，一个在另一个之下，我想将元素居中，但我对他的部分有疑问。我的元素没有垂直对齐，也没有真正居中，如下图所示。

代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import Table from 'react-bootstrap/Table';
<Table>
   <tbody>
      <tr>
         <td style={{width:"33%", textAlign: 'center', wordWrap: 'break-word', overflowWrap: 'break-word', width:"33%"}}>
         <p> Negative = 0, Neutral = 1, Positive = 2.</p>
         </td>
         <td style={{width:"33%"}}>
            <p style={{display: 'flex',  justifyContent:'center', alignItems:'center'}}> Filter the prediction </p>
            <input
            style={{display: 'flex',  justifyContent:'center', alignItems:'center'}}
            className="form-control input-sm"
            name="filter"
            type="text"
            maxLength="1"
            pattern="0|1|2"
            />
         </td>
         <td style={{textAlign: 'center', wordWrap: 'break-word', overflowWrap: 'break-word', width:"33%"}}>
         <center>
            <p style={{color:'#FFA500', fontSize:20}}> In order to download the CSV file, you must validate each highlighted line</p>
         </center>
         </td>
      </tr>
   </tbody>
</Table>
<Table striped bordered hover className='dataTable'>
   <thead>
      <tr>
         <th>#</th>
         <th>Text</th>
         <th>PyFeel</th>
         <th style={{whiteSpace:'nowrap'}}>
            Google CNL
         </th>
         <th>Cancellation</th>
      </tr>
   </thead>
   <tbody>
      <tr>
      </tr>
   </tbody>
</Table>

（我不知道如何将react-bootstrap添加到sn-p）

如何对齐和居中我的第一个表格元素？

【问题讨论】：

好的，我已经删除了<center> 并修复了一个问题
在将其发布为答案之前，只是为了确定，这是您要找的吗？ codesandbox.io/s/jolly-elgamal-d3b5c
@Apostolos 是的 :)
好的，然后将其作为答案发布：)

标签： html reactjs html-table react-bootstrap

【解决方案1】：

所以您首先需要在您的td 中定义一个verticalAlign: 'top' 属性，以便对齐所有td。

另外，如果您在一个td 上使用不同的字体，则会显示一个小的差异（如果字体较大，它将显示比其他 tds 低一些像素），因此您应该为所有td 使用相同的字体。

查看sandbox

【讨论】：