无法将 Material UI TableCell 中的内容居中

Question

我有 TableCell，其中显示 status 和 Button。我希望它们垂直堆叠并在单元格中居中。我可以单独工作但不能一起工作。我正在使用 FlexBox 垂直堆叠元素。相关代码如下。

<TableCell align="center" sx={{color:'warning.main', display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: 200}}>
   {status}
  <Button variant='contained'
    onClick={() => setOpen(true)}
    sx={{ m: 1 }}>
       Add manual payment
   </Button>
 </TableCell>

输出是这样的：不确定这里缺少什么。如果我不使用 FlexBox 但随后 status 和 Button 水平堆叠，它工作正常。我已经尝试了 alignItems、textAlign 和所有我能想到的类似属性。使用 MUI 版本 5.1.1，

Answer 1

您应该将 textAlign: 'center' 和 margin: 'auto' 添加到 TableCell

textAlign: 'center' 用于状态文本中心
margin: 'auto' 是当状态和按钮在两侧（左右）有备用 space 时居中

<TableCell align="center" sx={{color:'warning.main', display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: 200, margin: 'auto', textAlign: 'center'}}>
   {status}
  <Button variant='contained'
    onClick={() => setOpen(true)}
    sx={{ m: 1 }}>
       Add manual payment
   </Button>
 </TableCell>

无法将 Material UI TableCell 中的内容居中

Unable to center the content within a Material UI TableCell

reactjs

material-ui