Question

我发现许多ui库或框架的网格系统都没有简单的方法来仅将具有宽度的块垂直居中。我只想在中间说一个最大宽度为200px的块，如何避免使用自定义CSS设置样式？

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

doc：https://ant.design/components/grid/

Answer 1

实现居中很容易。在24列网格中，您可以使用Col组件并在跨度数值上四处移动以确保左右宽度相同。例如，这些都是可以让您居中的列设置：

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

只需选择一个事件编号的跨度，且偏移量等于（24-跨度）/ 2。

问题是最大宽度：200像素。为了将最大宽度限制为一个值，而不管它是什么屏幕尺寸，我担心您将不得不为其编写自定义CSS，这仅仅是因为没有任何东西可以在不指定该值的情况下为您提供特定的值是。

在这种情况下，我建议创建一个横跨整个行的一行和一列，并使用flex来使元素居中：

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

在反应中使用网格垂直对齐内容

1 个答案: