如何在反应网格系统行中垂直对齐？

Question

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

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

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

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

Answer 2

文档中有垂直对齐，它声明垂直对齐使用 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>

Answer 3

尝试

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

Answer 4

它有助于响应式设计

<div style={{display:'grid',placeContent:"center"}}>
    <Row>
      <Col md={1}>
        <img src=".." />
      </Col>
     <Col md={4}>
       .....
     </Col>
     <Col md={7}>
       ....
     </Col>
    </Row>
</div>

如何在反应网格系统行中垂直对齐？

How to vertically align in a react-grid-system row?

css

reactjs

vertical-alignment

react-grid-layout