英文:
React Material UI - How to centre contents to the middle of the page
问题
目前，按钮位于左上角。如何将按钮移到页面中间？
import { Button } from '@mui/material';function App() {return (<Button variant="contained">Hello World</Button>);}export default App;
尝试了上面的代码，但显然需要进行更多的更改以居中它。
英文:
At the moment, the button is outputting on the top left corner. How to bring the button to the middle of the page?
import {Button} from '@mui/material';function App() {return (<Button variant="contained">Hello World</Button>);}export default App;
Tried the above code but obviously requires more changes to centre it
答案1
得分: 1
你必须使用 Grid，如果你不想添加自定义样式import { Button, Grid } from "@mui/material";function App() {return (<Grid container justifyContent="center" alignItems="center"><Button variant="contained">Hello World</Button></Grid>);}export default App;
英文:
You have to use Grid, if you don't want to add custom styles
import { Button, Grid } from "@mui/material";function App() {return (<Grid container justifyContent="center" alignItems="center"><Button variant="contained">Hello World</Button></Grid>);}export default App;
答案2
得分: 0
你可以使用Box标签：
<Box textAlign='center'><Button variant='contained'>你好，世界</Button></Box>
英文:
You can use the Box tag:
<Box textAlign='center'><Button variant='contained'>Hello World</Button></Box>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论