时间戳

首页 > 解决方案 > 如何在中间定位行反应语义ui

javascript - 如何在中间定位行反应语义ui

问题描述

我将如何使用反应语义 ui 网格行将行定位在中间？想知道除了增加 padding-top 直到它到达中间是否还有其他方法

<Container>
        <Grid columns={4} divided>
          <Grid.Row>TITLE</Grid.Row>
          <Grid.Row>
            <Grid.Column width={4} color="violet" textAlign="center">
              <h3>Content</h3>
            </Grid.Column>
            <Grid.Column textAlign="center" width={4} color="violet">
              <h3>Content</h3>
            </Grid.Column>
            <Grid.Column textAlign="center" width={4} color="violet">
              <h3>Content</h3>
            </Grid.Column>
            <Grid.Column textAlign="center" width={4} color="violet">
              <h3>Content</h3>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Container>

标签： javascriptreactjssemantic-ui

解决方案

您可以使用verticalAlign 道具middle并为Grid.Row解决您的问题提供一个值。还要确保为网格提供高度。

根据文档：

  • 网格可以指定其垂直对齐方式以使其所有列垂直居中。</li>
  • 行可以指定其垂直对齐方式，使其所有列垂直居中。

工作演示在这里

<Container style={{ height: "100vh", background: "lightblue" }}>
    <Grid
      style={{ height: "400px", background: "gray" }}
      columns={4}
      divided
      padded={false}
    >
      <Grid.Row verticalAlign="middle">
        <Grid.Column width={4} color="violet" textAlign="center">
          <h3>Content</h3>
        </Grid.Column>
        <Grid.Column textAlign="center" width={4} color="violet">
          <h3>Content</h3>
        </Grid.Column>
        <Grid.Column textAlign="center" width={4} color="violet">
          <h3>Content</h3>
        </Grid.Column>
        <Grid.Column textAlign="center" width={4} color="violet">
          <h3>Content</h3>
        </Grid.Column>
      </Grid.Row>
    </Grid>
  </Container>

推荐阅读