Question

即使在将 justifyContent 和 alignItems 添加到中心后，网格内的 CardMedia 仍显示为左定位。

  <main className={classes.content}>
    <div className={classes.toolbar} />
    <Grid container spacing={0} alignItems="center" justify="center">
      <Grid item xs={12} sm={6}>
          <CardMedia
            className={classes.card}
            component="img"
            media="picture"
            alt="Contemplative Reptile"
            height="140"
            src={spot}
            title="Contemplative Reptile"
          />
      </Grid>
      <Grid item xs={12} sm={6}>
        <Typography paragraph className={classes.aboutText} align="center">
          <p>Hello World !!!</p>
          <p> I'm Lakshmipriya </p>
          Senior Software Engineer using javascript as main working tool,
          both in front-end and backend. Intrested in learning and building
          usefull web particles.
        </Typography>
      </Grid>
    </Grid>
  </main>

CodesandBox

Answer 1

TLDR;

尝试以下操作：

<Grid item xs={12} sm={6} md={4} lg={3}>

说明：

网格容器中有 2 个网格项。它们都有 xs={12} sm={6} - 这意味着对于 xs 或更大的设备，这些项目将占用 12（全角），对于更大的 sm 设备，这些项目将占用 6（半角）。

它们都占据了 50% 的宽度，这留下了 0 空间用于对齐和对齐。

您可以添加其他断点，例如 - lg={4}，然后它们将居中对齐并两端对齐。

Material UI 中的 CardMedia 显示在左侧

1 个答案: