我不太了解 Material UI 网格系统。如果我想使用表单组件进行登录,在所有设备(移动设备和桌面设备)上将其置于屏幕中央的最简单方法是什么?
因为您将在登录页面上使用它。
这是我在使用 Material UI 的登录页面中使用的代码
材质 UI v5
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justifyContent="center"
sx={{ minHeight: '100vh' }}
>
<Grid item xs={3}>
<LoginForm />
</Grid>
</Grid>
Material UI v4 及以下版本
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: '100vh' }}
>
<Grid item xs={3}>
<LoginForm />
</Grid>
</Grid>
这将使该登录表单位于屏幕中央。
但是,IE 仍然不支持 Material-UI 网格,您会在 IE 中看到一些错位的内容。
正如@max指出的,另一种选择是,
<Grid container justifyContent="center">
<Your centered component/>
</Grid>
请注意,Material UI v4 及以下版本应使用 justify="center" 代替。
但是,使用没有网格项的网格容器是一种未记录的行为。
更新于2022年6月6日
除此之外,另一种新的更好的方法将使用Box
成分。
<Box
display="flex"
justifyContent="center"
alignItems="center"
minHeight="100vh"
>
<YourComponent/>
</Box>
这最初是由 Killian Huyghe 作为另一个答案发布的。
希望对你有帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)