javascript - 在 Card 组件中居中 Avatar 组件
问题描述
再会,
我正在尝试<Avatar>
使用 Material UI 和组件内部的 React将我的组件居中<Card>
。实现这一目标的最佳方法是什么?此刻看起来非常拥挤。
我尝试将头像类设置为显示 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);
解决方案
如果要将所有内容移动到中心,则第一个选项需要应用alignItems: 'center'
tocard
而不是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'
}
第二种可能解决方案的结果:
如果你问我,我会选择第二个选项,这看起来更好。
我希望这会有所帮助!
推荐阅读
- python - 3 个参数的矩阵等高线图
- python - 如何使用字典理解编写以下代码
- python - 无法通过python街机画一个圆圈?
- regex - 使用带有 unicode 的环视正则表达式时,搜索面板中出现 VSCode 错误
- asp.net - 如何使用 web.config 转换在 APP 设置部分插入新密钥
- tensorflow - 使用 Tensorflow 2.1.0 在 GPU 上训练 CNN 时出错
- python - 将scrapy结果存储到数据库时,如何避免存储重复
- javascript - 如何在角度应用程序中从 wordpress 检查用户角色
- tizen - 如何在 Tizen 原生可穿戴设备上获取 IMEI 号码?
- aframe - 将带有实例网格的 glTF 加载到 Aframe 中