如何使用material ui在复杂网格中居中放置容器/项目
如何使用material ui在复杂网格中居中放置容器/项目
提问于 2020-01-14 22:51:21
https://codesandbox.io/s/wonderful-fog-yvvjp
我正在尝试让它下面的头像和排版组件完美地位于Paper组件的左侧部分的中心。在使用DevTools进行检查后，似乎托管了阿凡达和排版的项目/容器组件并没有完全占用它们的父容器空间。我已经尝试将其高度设置为100%。我也尝试过将flexGrow设置为1。我如何实现阿凡达排版组件的垂直和水平居中？
import React from "react";
import "./styles.css";
import {
Container,
Typography,
Paper,
makeStyles,
Avatar,
Grid
} from "@material-ui/core";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1
},
paper: {
height: "15vh"
},
avatarSection: {
height: '100%'
}
}));
export default function App() {
const classes = useStyles();
return (
<Container className={classes.root}>
<Paper className={classes.paper}>
<Grid container direction="row">
<Grid
item
container
direction="column"
justify="center"
alignItems="center"
className={classes.avatarSection}
xs={3}
>
<Avatar />
<Typography variant="subtitle2">Benjamin world</Typography>
</Grid>
<Grid item xs={9}>
<Typography variant="body1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
quam lorem, malesuada sed sapien non.
</Typography>
</Grid>
</Grid>
</Paper>
</Container>
);
}回答 4
Stack Overflow用户
回答已采纳
发布于 2020-01-14 23:08:23
如果我没理解错的话，你有一些额外的类是不必要的。
您可以通过以下代码实现垂直对齐：
const useStyles = makeStyles(theme => ({
paper: {
height: "15vh"
},
}));
export default function App() {
const classes = useStyles();
return (
<Container>
<Paper>
<Grid className={classes.paper} container alignItems="center" direction="row">
<Grid
item
container
direction="column"
justify="center"
alignItems="center"
xs={3}
>
<Avatar />
<Typography variant="subtitle2">Benjamin world</Typography>
</Grid>
<Grid item xs={9}>
<Typography variant="body1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
quam lorem, malesuada sed sapien non.
</Typography>
</Grid>
</Grid>
</Paper>
</Container>
);
}Stack Overflow用户
发布于 2020-01-14 23:05:38
在您的外部网格组件上，为它提供一个带有height:'inherit'的css类，并添加属性alignItems="center"
Stack Overflow用户
发布于 2020-01-14 23:09:34
试试这张纸：{ display：'flex'，alignItems：'center‘}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59736205
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号