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

Question

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

代码如下：

 <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添加到代码段中）

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

Answer 1

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

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

检查这个沙箱