如何在MaterialUI中将网格居中
如何在MaterialUI中将网格居中
提问于 2021-01-24 03:34:06
我试着在屏幕的垂直和水平中心创建3个纸质元素。无论我应用什么css规则或支持什么，当我在控制台中检查HTML元素时，HTML的高度始终是76像素，并且元素不会低于该div的高度。我真的不知所措。
import React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
const useStyles = makeStyles({
grid: {
height: "100%"
},
paper: {
height: 140,
width: 100,
},
});
export default function SpacingGrid() {
const classes = useStyles();
return (
<Grid
className={classes.grid}
container
justify="center"
alignItems="center"
spacing={2}
>
{[0, 1, 2].map((value) => (
<Grid key={value} item>
<Paper className={classes.paper} />
</Grid>
))}
</Grid>
);
}import React from 'react';
import ReactDOM from 'react-dom';
import SpacingGrid from './SpacingGrid';
ReactDOM.render(
<React.StrictMode>
<SpacingGrid />
</React.StrictMode>,
document.getElementById('root')
);回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-24 03:52:06
要水平和垂直居中到视口，需要使<html>、<body>和<div id="root">填充视口。为此，请创建文件style.css
html,
body,
#root {
height: 100vh;
}然后在React项目中的任意位置导入样式。例如，在index.js中导入它
import React from "react";
import ReactDOM from "react-dom";
import SpacingGrid from './SpacingGrid';
import "./style.css"; // Add this!
ReactDOM.render(
<React.StrictMode>
<SpacingGrid />
</React.StrictMode>,
document.getElementById("root")
);这是stackblitz上的实时版本
Stack Overflow用户
发布于 2021-01-24 03:49:41
const useStyles = makeStyles({
grid: {
position: "absolute", // add this.
height: "100%"
},
paper: {
height: 140,
width: 100,
},
});这是sandbox链接。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65863559
复制相关文章
相似问题
腾讯云开发者
