使用react中的网格垂直对齐内容



我发现许多ui库或框架的网格系统没有简单的方法来仅仅垂直居中一个有宽度的块。我只想说一个中心最大宽度为200px的块,我如何避免使用自定义css来进行样式设置?

https://codesandbox.io/s/antd-layout-ch745

文件:https://ant.design/components/grid/

实现居中很容易。在24列网格中,您可以使用Col组件并围绕跨度数字进行播放,以确保宽度左右相同。例如,这些都是可以让你居中的列设置:

  • <Col span={12} offset={6}>
  • <Col span={10} offset={7}>
  • <Col span={8} offset={8}>
  • <Col span={6} offset={8}>

只需选择一个span作为事件编号,偏移量等于(24-span(/2。

问题是最大宽度:200px。无论屏幕大小如何,都要将最大宽度限制为一个值,恐怕你必须为它编写自定义CSS,因为如果不指定该值,就没有什么能为你提供特定的值。

在这种情况下,我建议创建横跨整行的一行和一列,并使用flex将元素居中:

<Col span={24}>
<div style="display: 'flex'; justify-content: 'center';">
<div style="flex: 1; max-width: '200px'">
</div>
</div>
</Col>

最新更新