如何使 <Col> 内的文本垂直对齐 <img> 的大小？（蚂蚁设计）

Question

这就是它目前的样子，但我希望所有详细信息（即标题、价格和数量）与图像垂直居中对齐，同时将详细信息保留在列内

如何使 的高度与 i 放入的高度相似，两者都在标签内？

我正在使用蚂蚁设计

<Row>
  <Col
    span={6}
    style={{
      fontWeight: 600,
      paddingLeft: 10,
      alignItems: "center",
      textAlign: "center",
      verticalAlign: "center",
      justifyContent: "center"
    }}
  >
    <img
      style={{ width: "100%", height: "100%" }}
      src={
        "https://www.needen.com/files/model_specifications/2015/8/31/121154/121154_big.jpg?1441032179"
      }
    />
  </Col>

  <Col
    span={6}
    style={{
      display: "flex",
      paddingLeft: 10,
      alignItems: "center",
      verticalAlign: "middle"
    }}
  >
    <h5 style={{ verticalAlign: "middle" }}>T-Shirt 1</h5>
  </Col>

  <Col
    type="flex"
    span={4}
    style={{
      minHeight: 100,
      fontWeight: 600,
      verticalAlign: "middle",
      textAlign: "center",
      alignItems: "center",
      justifyContent: "center"
    }}
  >
    RM 19.90
  </Col>

  <Col
    span={4}
    style={{
      minHeight: 100,
      fontWeight: 600,
      textAlign: "center",
      alignItems: "center",
      verticalAlign: "middle"
    }}
  >
    2
  </Col>

  <Col
    span={4}
    style={{
      minHeight: 100,
      fontWeight: 600,
      textAlign: "right",
      paddingRight: 10,
      alignItems: "center",
      verticalAlign: "middle"
    }}
  >
    <p
      style={{ height: "100%", verticalAlign: "middle", alignItems: "center" }}
    >
      RM 38.90
    </p>
  </Col>
</Row>

整行的大小应与图像高度相同，并且文字应垂直居中对齐...

Answer 1

参考GridAPI：

<Row
  type="flex"
  style={{ alignItems: "center" }}
  justify="center"
  gutter={10}
/>

例子：

export default function App() {
  return (
    <Row
      type="flex"
      style={{ alignItems: 'center' }}
      justify="center"
      gutter={10}
    >
      <Col>
        <img
          style={{ width: 100, border: '1px solid palevioletred' }}
          alt="white-shirt"
          src={
            'https://www.needen.com/files/model_specifications/2015/8/31/121154/121154_big.jpg?1441032179'
          }
        />
      </Col>
      <Col>
        <Row
          type="flex"
          gutter={10}
          style={{ alignItems: 'center', border: '1px solid palevioletred' }}
        >
          <Col>T-Shirt 1</Col>
          <Col>RM 19.90</Col>
          <Col>2</Col>
          <Col>RM 38.90</Col>
        </Row>
      </Col>
    </Row>
  );
}