如何在React和Material UI中实现列表项水平对齐

方案1：Flex布局强制垂直居中（适用于List/自定义布局） #

给每个赛事项的容器启用flex布局，并设置垂直居中对齐，同时给时间模块固定宽度，避免内容长度差异导致错位：

import { List, ListItem, Box, Typography } from '@mui/material';

// 示例代码
<List>
  {matches.map(match => (
    <ListItem 
      key={match.id}
      sx={{ 
        display: 'flex', 
        alignItems: 'center', 
        padding: '12px 0',
        gap: 3
      }}
    >
      {/* 固定宽度的时间容器 */}
      <Box sx={{ width: 110, textAlign: 'center' }}>
        <Typography variant="body2">{match.date}</Typography>
        <Typography variant="body2">{match.time}</Typography>
      </Box>
      {/* 对阵信息容器 */}
      <Box sx={{ flex: 1, display: 'flex', justifyContent: 'space-between' }}>
        <Typography>{match.homeTeam}</Typography>
        <Typography>VS</Typography>
        <Typography>{match.awayTeam}</Typography>
      </Box>
    </ListItem>
  ))}
</List>

方案2：Table组件优化垂直对齐 #

针对Table组件，直接给所有TableCell设置垂直居中属性，同时固定时间列宽度：

import { Table, TableRow, TableCell, TableHead, TableBody, Typography } from '@mui/material';

// 示例代码
<Table sx={{ minWidth: 700 }}>
  <TableHead>
    <TableRow>
      <TableCell sx={{ width: 130, verticalAlign: 'middle' }}>赛事时间</TableCell>
      <TableCell sx={{ verticalAlign: 'middle' }}>对阵双方</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    {matches.map(match => (
      <TableRow key={match.id}>
        <TableCell sx={{ verticalAlign: 'middle' }}>
          <Typography>{match.date}</Typography>
          <Typography>{match.time}</Typography>
        </TableCell>
        <TableCell sx={{ verticalAlign: 'middle', display: 'flex', justifyContent: 'space-between' }}>
          <Typography>{match.homeTeam}</Typography>
          <Typography>VS</Typography>
          <Typography>{match.awayTeam}</Typography>
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

方案3：统一文本行高兜底 #

如果部分元素因文本行数不同导致偏移，给所有相关文本设置统一行高，确保视觉对齐：

<Typography sx={{ lineHeight: '22px' }}>{match.time}</Typography>
<Typography sx={{ lineHeight: '22px' }}>{match.homeTeam}</Typography>

内容的提问来源于stack exchange，提问作者RyanOliver