代码之家 › 专栏 › 技术社区 › enzeberg

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

antd frontend reactjs css

enzeberg · 技术社区 · 7 年前

请参见我的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> 看起来不太好。我期待所有的内容,不仅是文本,还有 SVG 在里面 <世界其他地区(>); 可以垂直居中。

我还尝试了其他图标库,例如。 react-icons-kit ,这不起作用。

有人有主意吗?

2 回复 | 直到 3 年前

enzeberg 3 年前

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

对于中的图标 @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>

Jesper We 7 年前

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

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

推荐文章

Franva · 如何使用Webpack 3配置Ant设计

7 年前

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

7 年前

Emo · 导入Ant设计组件无效

7 年前

ThePainnn · 由第三方(antd)样式覆盖的样式化组件

7 年前

Michael Fernandes · 垂直菜单蚂蚁设计高度100%

7 年前

Thijs Koerselman · 如何包装组件并继承其props接口

7 年前

willywonka15 · 如何禁用react中的子菜单项?

7 年前

Thijs Koerselman · Ant Design antd与antd mobile用于非本地移动web开发

7 年前

Yichz · 包装Antd组件

7 年前

Avery235 · rc时间选择器在移动设备上未正确显示

7 年前