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

Question

我如何使用 React 语义 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>

Answer 1

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

根据文档：

网格可以指定其垂直对齐方式以使其所有列垂直居中。
行可以指定其垂直对齐方式以使其所有列垂直居中。

Working demo is here

<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>

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

how to position row in the middle react semantic ui

javascript

reactjs

semantic-ui