英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论