在Ant Design中,如何将图标垂直居中?

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

对于中的图标 @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 在里面 古老的 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 :

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>

这并不是真正的antd特定,它只是一般的垂直居中。 我可以推荐 6 Methods for Vertical Centering 它讨论了在传统CSS上执行此操作的方法。在这种情况下,CSS表方法应该可以很好地工作。

您还可以使用Flexbox实现它( <Row type="flex"> ),带有 align-items: center 对于行。