时间戳

首页 > 解决方案 > 如何使用 Grid 使组件准确居中？

css - 如何使用 Grid 使组件准确居中？

问题描述

我想在屏幕的中心有一个组件。

这是我的组件，由堆叠图像和一些文本组成：

return (
  <Grid>
            <Grid.Row>
                <Grid.Column width={1} />
                <Grid.Column width={14}>
                    <img src={upload} alt="Upload box" />
                </Grid.Column>
                <Grid.Column width={1} />
            </Grid.Row>
            <Grid.Row>
                <Grid.Column width={1} />
                <Grid.Column width={14}>
                    <div>Drop files here</div>
                </Grid.Column>
                <Grid.Column width={1} />
            </Grid.Row>
        </Grid>
  );

然后我有我的应用程序：

return (
  <div className="App">
    <Grid>
      <Grid.Row>
        <Grid.Column width={1} />
        <Grid.Column width={14}>
          <UploadBox />
        </Grid.Column>
        <Grid.Column width={1} />
      </Grid.Row>
    </Grid>
  </div>
);

结果是我的“UploadBox”在左侧，在浏览器左边框之前只有一点空间。

由于语义 ui 是在 16 列左右计算的，我确信它是以这种方式居中的，但我弄错了……你能帮帮我吗？

标签： cssreactjssemantic-ui-react

解决方案

尝试使用以下语法来获得居中对齐的网格：

<Grid centered columns={2}>
  <Grid.Column>
    <!-- grid content here -->
  </Grid.Column>
</Grid>

推荐阅读