如何在Material-UI中将组件居中并使其具有响应能力? [英] How to center a component in Material-UI and make it responsive?

问题描述

我不太了解React Material-UI网格系统.如果我想使用表单组件进行登录，最简单的方法是在所有设备(移动设备和台式机)的屏幕上将其居中显示?

I don't quite understand the React Material-UI grid system. If I want to use a form component for login, what is the easiest way to center it on the screen on all devices (mobile and desktop)?

推荐答案

由于您将在登录页面中使用它. 这是我在使用Material-UI的登录页面中使用的代码

Since you are going to use this in a login page. Here is a code I used in a Login page using Material-UI

<Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justify="center"
  style={{ minHeight: '100vh' }}
>

  <Grid item xs={3}>
    <LoginForm />
  </Grid>   

</Grid> 

这将使此登录表单位于屏幕中央.

this will make this login form at the center of the screen.

但是IE仍然不支持Material-UI网格，您会在IE中看到一些放错位置的内容.

But still IE doesn't support the Material-UI Grid and you will see some misplaced content in IE.

希望这会对您有所帮助.

Hope this will help you.

这篇关于如何在Material-UI中将组件居中并使其具有响应能力?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！