要使Material UI Paper元素上的表格居中,可以使用Flexbox布局或者Grid布局来实现。
使用Flexbox布局:
.centered-paper {
display: flex;
justify-content: center;
align-items: center;
}
import React from 'react';
import Paper from '@material-ui/core/Paper';
const CenteredTable = () => {
return (
<Paper className="centered-paper">
{/* 表格内容 */}
</Paper>
);
}
export default CenteredTable;
使用Grid布局:
.centered-paper {
display: grid;
place-items: center;
}
import React from 'react';
import Paper from '@material-ui/core/Paper';
const CenteredTable = () => {
return (
<Paper className="centered-paper">
{/* 表格内容 */}
</Paper>
);
}
export default CenteredTable;
以上两种方法都可以将表格居中显示在Paper元素中。在React中使用Material UI库时,可以直接使用Paper组件和相关样式类名来实现居中效果。
领取专属 10元无门槛券
手把手带您无忧上云