MUI：无论复选框标签长度如何，都将复选框置于网格中

Question

我有一个带有代码的表格：

<Box display="flex" flexDirection="column" alignItems="center" mt={2}>
      <Grid container spacing={1}>
        {playlists.map((playlist) => (
          <Grid item lg={4} md={6} sm={6} xs={12} key={playlist?.id}>
            <FormControlLabel
              control={<Checkbox checked={true} />}
              label={playlist?.name}
            />
          </Grid>
        ))}
      </Grid>
      <TextField
        name="comment"
        label="Comment"
        multiline
        sx={{ width: isLarge ? "80%" : "45%" }}
        margin="normal"
        color="secondary"
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <AddCommentIcon />
            </InputAdornment>
          ),
        }}
      />
      <Button
        variant="contained"
        disableElevation
        color="secondary"
        startIcon={<VideoCallIcon />}
        sx={{ mt: 2, width: isLarge ? "80%" : "45%" }}
      >
        Upload Video
      </Button>
</Box>

渲染效果如下：

我想让左栏左侧的边距等于右栏右侧的边距，以便复选框在页面上居中。

我可以通过将网格项设置为具有

align="center"

属性来实现此目的，尽管这会破坏复选框的垂直对齐 - 这是供参考的图片：

我希望表单看起来像这样（我用 CSS 强制执行了代码，尽管现在表单不能根据用户的屏幕尺寸动态工作 - 这只是我想要的结果的参考。

如何调整我的容器来实现这一目标？

Answer 1

{播放列表.map((播放列表) => (

控制={}

标签={播放列表？.名称}

style={{ margin: 'auto' }} // 将复选框在网格单元内居中

/>

））}

{/* ...其余代码*/}

当然！要调整表单容器并实现所需的对齐方式（同时响应用户的屏幕尺寸），您可以结合使用 CSS 样式和 Material-UI 提供的属性。这是一个应该有帮助的示例代码：

{playlists.map((playlist) => (



control={}

label={playlist?.name}

style={{ margin: 'auto' }} // Centers the checkbox within the grid cell

/>

))}

{/* ...rest of your code */}

在此示例中：

• justifyContent="center"

  Grid

  容器中的元素水平居中。

• 每个

  Grid

  项目都使用

  flex

  样式和

  justifyContent: 'center'

  将复选框水平居中。

• margin: 'auto'

  上的

  FormControlLabel

  属性将复选框在其容器内垂直和水平居中。

这应该使您的表单具有响应能力，并在不同设备上保持所需的对齐方式。如果您需要项目其他方面的进一步调整或帮助。