css - 如何使我的 中的文本垂直对齐遵循 的大小？ ( Ant 设计)

Question

This is what it currently looks like butI wish all the details which is title,price and quantity and be vertically align center to the image while keeping the details inside the column

如何使标签内的高度与我放入的高度相似？

我正在使用 Ant Design

<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

引用Grid API :

<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>
  );
}