javascript - 在 Card 组件中居中 Avatar 组件

Question

你好，

我正在尝试将我的 <Avatar> 居中在 <Card> 中使用带有 React 的 Material UI 组件成分。完成此任务的最佳方法是什么？此刻看起来非常拥挤。

我已经尝试将头像类设置为显示 flex 和 justifyContent中心，但这并没有被证明是成功的。

这是整个页面的代码，其中包括我正在使用的 Material UI 组件。

import React, { useEffect } from "react";
import Spinner from "../components/layout/Spinner";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { getProfiles } from "../actions/profile";
import Navbar from "../components/dashboard/Navbar";
import {
  Card,
  CardActions,
  CardContent,
  CssBaseline,
  Grid,
  Typography,
  Button,
  makeStyles,
  Container,
  Avatar
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  cardGrid: {
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(4)
  },
  card: {
    height: "100%",
    display: "flex",
    flexDirection: "column"
  },
  cardContent: {
    flexGrow: 1
  },
  profileHeader: {
    textAlign: "center"
  },
  avatar: {
    width: theme.spacing(7),
    height: theme.spacing(7)
  }
}));

const Profiles = ({ getProfiles, profile: { profiles, loading } }) => {
  const classes = useStyles();

  useEffect(() => {
    getProfiles();
  }, [getProfiles]);

  return (
    <>
      {loading ? (
        <Spinner />
      ) : (
        <React.Fragment>
          <CssBaseline />
          <Navbar />
          <main>
            <Container className={classes.cardGrid} maxWidth="md">
              <Typography className={classes.profileHeader} variant="h2">
                Profiles
              </Typography>
              <Grid container spacing={4}>
                {profiles.map(profile => (
                  <Grid item key={profile._id} xs={12} sm={6} md={4}>
                    <Card className={classes.card}>
                      <Avatar
                        alt="Profile Image"
                        src={profile.user.avatar}
                        className={classes.avatar}
                      />
                      <CardContent className={classes.cardContent}>
                        <Typography gutterBottom variant="h5" component="h2">
                          Goals completed {profile.goalsCompleted}
                        </Typography>
                        <Typography>{profile.aboutme}</Typography>
                      </CardContent>
                      <CardActions>
                        <Button size="small" color="primary">
                          View
                        </Button>
                      </CardActions>
                    </Card>
                  </Grid>
                ))}
              </Grid>
            </Container>
          </main>
        </React.Fragment>
      )}
    </>
  );
};

Profiles.propTypes = {
  getProfiles: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  profile: state.profile
});

export default connect(mapStateToProps, { getProfiles })(Profiles);

Answer 1

第一个选项如果你想将所有内容移动到中心则需要申请alignItems: 'center'至 card而不是 avatar ，如下所示:

card: {
   height: '100%',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center'
},

这将导致将所有内容移动到 <Card> 的中心组件。

第二个是创建一个<Container> <Avatar>周围首先如下:

<Card className={classes.card}>
   <Container className={classes.center}>
      <Avatar alt="Profile Image"
              src={'#'}
              className={classes.avatar} />
   </Container>
   { /* rest of the code */ }
</Card>

然后应用以下样式:

center: {
   display: 'flex',
   alignItems: 'center',
   flexDirection: 'column'
}

第二种可能解决方案的结果:

如果你问我，我会选择第二个选项，看起来更好。

希望对您有所帮助!