在 Ant Design 中，如何让一个图标在 <Row> 中垂直居中？

Question

请看我的 React 代码示例：

import React from 'react';
import { Row, Col, Icon } from 'antd';
const MyRow = () => (
  <Row type="flex" align="middle">
    <Col md={10}>Trouble is a friend</Col>
    <Col md={10}><Icon type="play-circle-o" /></Col>
    <Col md={4}><div>Lenka</div></Col>
  </Row>
);

...

当我渲染<MyRow />时，我发现<Row>中的文本很好地垂直居中，但是<Icon>组件没有这样做。以至于我的<MyRow>看起来不太好。我希望所有内容，不仅是文本，还有 <Row> 中的 SVG 都可以垂直居中。

我也尝试了其他图标库，例如react-icons-kit，没有用。

有人知道吗？

Answer 1

这并不是 antd 特有的，它只是一般的垂直居中。我可以推荐 6 Methods for Vertical Centering，它讨论了在传统 CSS 上实现它的方法。 CSS Table 方法在这种情况下应该很有效。

您还可以使用 Flexbox (<Row type="flex">) 实现它，其中 align-items: center 用于行。

Answer 2

幸运的是，我自己找到了一些解决这个小问题的方法。

对于 @ant-design/icons 中的图标：

import { PlayCircleFilled } from '@ant-design/icons';

<Row type="flex" align="middle">
  <Col>
    <PlayCircleFilled
      style={{
        verticalAlign: 'middle',
      }}
    />
  </Col>
</Row>

对于 react-icons 中的图标：

import { RiVolumeUpLine } from "react-icons/ri";

<Row type="flex" align="middle">
  <Col>
    <RiVolumeUpLine
      style={{
        verticalAlign: 'middle',
      }}
    />
  </Col>
</Row>

对于 Icon 在 old antd:

<Row type="flex" align="middle">
  <Col>
    <div
      style={{
        display: 'inline-flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Icon
        type="play-circle-o"
        style={{
          display: 'inline-block',
          verticalAlign: 'middle',
        }}
      />
    </div>
  </Col>
</Row>

对于 react-icons-kit 中的 Icon：

import Icon from 'react-icons-kit';
import { ic_play_circle_outline } from 'react-icons-kit/md/ic_play_circle_outline';
...
<Row type="flex" align="middle">
  <Col>
    <Icon icon={ic_play_circle_outline} style={{ verticalAlign: 'middle' }} />
  </Col>
</Row>

在 Ant Design 中，如何让一个图标在 <Row> 中垂直居中？

In Ant Design, how can we center an icon vertically in <Row>?

css

frontend

reactjs

antd