如何将中心的 material-ui 组件与响应行为对齐？

Posted 2023-02-22

【中文标题】如何将中心的 material-ui 组件与响应行为对齐？

【英文标题】：How do I align a component of material-ui in the center with responsive behaviour?

【发布时间】：2020-08-23 14:05:11

【问题描述】：

注意：我已经尝试过this question 中提到的方法，但在我的情况下它们都不起作用。

这是我的分页组件的链接 - pagination.jsx

我希望将具有响应行为的页面中心的pagination 组件对齐，我该如何实现？我同时使用material-ui 和mdbootstrap。

预期输出

【问题讨论】：

表格有很多种，不过就这个解决了。 ...

@JaironAlvesLima 的形式，它起作用了！ :D，谢谢你的救援。

@JaironAlvesLima，你也可以写在答案里，我会接受的！

谢谢，但您的疑问与使用 React 对组件进行样式设置和定位有很大关系。这个问题在社区中得到广泛解决。您的问题的详细答案将来自这一点。如果您使用的是 Material-UI 和 MD Bootstrap，它们是相似的，并且它们的布局和样式系统也可以很好地处理这个主题。 material-ui.com/components/grid - mdbootstrap.com/docs/react/layout/grid-usage

感谢您的链接，@JaironAlvesLima。是的，我只是一个初学者，我为此苦苦挣扎。感谢很棒的社区救了我！

【参考方案1】：

我不知道你是否已经找到答案，但我会使用 Material-UI 的Box component。

下面的代码将使分页组件居中并添加一些顶部和底部边距以将其放置在更下方，就像您在图片中想要的那样。

<Box my=2 display="flex" justifyContent="center">
  <Pagination count=10 showFirstButton showLastButton />
</Box>