Css 如何在我的<；Col>；垂直对齐遵循<；img>；？（设计）

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

我正在使用Ant设计

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

T恤衫1
19.90马来西亚令吉
2.

38.90马来西亚令吉

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

参考：

例如：

导出默认函数App（）{
返回(
T恤衫1
19.90马来西亚令吉
2.
38.90马来西亚令吉
);
}

---

您在另一个

中嵌套了

。这不是应该的。好吧，编辑并更新了我的代码，但是如何解决原始问题呢？尽量不要直接设置

节点的样式（至少没有布局材料），而是在它们中放置一个单独的

，您可以设置样式。此外，在使用自己的CSS修复问题之前，尝试使用Ant提供的所有可能性。也许

有帮助吗？显示一张图像\您预期行为的示例…哦，很抱歉，我已经更新了图像，感谢您的帮助我使用了您的代码，效果非常好！但我怎么能希望他们能与专栏保持一致，而不仅仅是居中（我在问题中上传了一张图片作为更新）。。能做到吗？因为我不熟悉Flex，请再问一个问题