0

我正在使用带有图像和两列文本的react-grid-system，如下所示：

<Row>
  <Col md={1}>
    <img src=".." />
  </Col>
  <Col md={4}>
    .....
  </Col>
  <Col md={7}>
    ....
  </Col>
</Row>

在此，我希望图像和所有文本垂直位于行的中间。我在这里阅读了文档，但找不到与垂直对齐相关的任何内容。

4

4 回答 4

1

我认为您应该将 justify 属性添加到具有“中心”值的行元素，如下所示：-

    <Row justify="center">
<Col xs={3} debug>1 of 3</Col>
<Col xs={3} debug>2 of 3</Col>
<Col xs={3} debug>3 of 3</Col>
</Row>
于 2020-12-06T15:36:27.237 回答
1

文档中有垂直对齐，它声明垂直对齐以使用 align 道具

  <Row align="center" style={{ height: '75px' }} debug>
    <Col debug>1 of 3</Col>
    <Col debug>2 of 3</Col>
    <Col debug>3 of 3</Col>
  </Row>
于 2020-12-06T15:37:39.060 回答
1

尝试

<div class="i-am-centered">
<Row>
  <Col md={1}>
    <img src=".." />
  </Col>
  <Col md={4}>
    .....
  </Col>
  <Col md={7}>
    ....
  </Col>
</Row>
</div>

和造型：

<style>
.i-am-centered { margin: auto; max-width: 300px;}
  </style>
于 2020-12-06T15:47:07.140 回答
1

它有助于响应式设计

<div style={{display:'grid',placeContent:"center"}}>
    <Row>
      <Col md={1}>
        <img src=".." />
      </Col>
     <Col md={4}>
       .....
     </Col>
     <Col md={7}>
       ....
     </Col>
    </Row>
</div>
于 2020-12-06T15:55:57.710 回答