Question

尝试在我的主页的主要部分使用卡片。但是，我将不会做任何事情将卡居中，并且我尝试放置了justify，alignItems，alignContent，但是，它们似乎都无法解决问题。老实说，我不知道该怎么做才能使它与中心对齐。我什至不知道这怎么可能。这是代码：

:}

Answer 1

使用这种风格

       const useStyles = makeStyles((theme) => ({
        cardstyle:{
        marginTop: theme.spacing(20),
        margin:'auto',
        flexDirection: 'column',
    },
}));

   <Card className={clasess.cardstyle}>
  // card content
</Card>

Answer 2

使用Material-UI提供的网格

import Grid from '@material-ui/core/Grid';
// import like this

function MediaCard(props) {
 const { classes } = props;
 <Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justify="center"
  style={{ minHeight: '100vh' }}
 >

  <Grid item xs={3}>
    <Card>
      // card content
    </Card>
  </Grid>      
 </Grid>
}

希望这会对您有所帮助。使用此：https://material-ui.com/layout/grid/以获得更多信息

Answer 3

或者切换到<Grid>，我在<div>元素周围放置了<CardMedia>包装器并使用

style={{ display:'flex', justifyContent:'center' }}

在外部<div>标签上获得相同的结果。

Answer 4

在设置card的{{1}}的宽度时，我不知道您的问题是什么。

我看不到渲染视图，但是，我想推荐一种没有100%的最小解决方案。

如果我是你，我会尝试：

<Grid>

物料UI卡将不会居中。 React JS

4 个答案: