如何实现react-bootstrap Table组件内元素的垂直对齐与居中？

实现第一个表格垂直+水平居中的调整方法 #

• 单元格垂直居中依靠table原生的vertical-align属性实现，给第一个表格的所有<td>添加verticalAlign: 'middle'样式即可让单元格内所有内容垂直居中
• 水平居中直接给<td>设置textAlign: 'center'，内部子元素会继承该属性，无需给p、input等子元素重复设置flex相关的居中属性，避免样式冲突
• 若要在在线代码片段中运行react-bootstrap代码，需要提前引入Bootstrap核心CSS文件和React-Bootstrap的对应依赖即可。

修改后的核心代码示例 #

import Table from 'react-bootstrap/Table';

{/* 第一个表格 */}
<Table>
   <tbody>
      <tr>
         <td style={{width:"33%", textAlign: 'center', verticalAlign: 'middle', wordWrap: 'break-word', overflowWrap: 'break-word'}}>
           <p> Negative = 0, Neutral = 1, Positive = 2.</p>
         </td>
         <td style={{width:"33%", textAlign: 'center', verticalAlign: 'middle'}}>
            <p> Filter the prediction </p>
            <input
              className="form-control input-sm mx-auto"
              name="filter"
              type="text"
              maxLength="1"
              pattern="0|1|2"
            />
         </td>
         <td style={{width:"33%", textAlign: 'center', verticalAlign: 'middle', wordWrap: 'break-word', overflowWrap: 'break-word'}}>
            <p style={{color:'#FFA500', fontSize:20}}> In order to download the CSV file, you must validate each highlighted line</p>
         </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>

注：input添加mx-auto类是bootstrap自带的水平居中类，针对块级的form-control元素生效，配合父级的textAlign:center可以保证输入框水平居中。

内容的提问来源于stack exchange，提问作者J.erome