我想垂直对齐Material UI Paper组件中的一些文本。
代码是here。
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles(theme => ({
root: {
padding: theme.spacing(3, 2),
height: 200,
verticalAlign: 'middle'
},
}));
function PaperSheet() {
const classes = useStyles();
return (
<div>
<Paper className={classes.root}>
<Typography variant="h5" component="h3">
This is a sheet of paper.
</Typography>
<Typography component="p">
Paper can be used to build surface or other elements for your application.
</Typography>
</Paper>
</div>
);
}
export default PaperSheet;
2条答案
按热度按时间nwlqm0z11#
vertical-align
CSS属性仅适用于display: block
元素。你可以选择使用flexbox声明你的
root
类:rqdpfwrv2#
Stack
可以在MUI v5中使用。将方向设置为column
和justifyContent
,使Card
内的内容居中对齐:现场演示