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

css reactjs frontend antd
enzeberg picture enzeberg · Feb 16, 2018 · Viewed 26k times · Source

Please see my React code example:

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

...

When I rendered <MyRow />, I found that the text in <Row> was centered vertically well, but the <Icon> component didn't do so. So that my <MyRow> didn't look good. I expected all the content, not only the text but also the SVG in <Row> could be centered vertically.

I also tried other icon library, e.g. react-icons-kit, which did not work.

Does anyone have an idea?

Answer

enzeberg picture enzeberg · Feb 17, 2018

Thanks to Jesper We's help! Luckily I found the solution for this little problem:

For Icon in 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>

For Icon in 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>

Related questions

React.js inline style best practices

I'm aware that you can specify styles within React classes, like this: const MyDiv = React.createClass({ render: function() { const style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); Should I …

Read More
How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More
React Js conditionally applying class attributes

I want to conditionally show and hide this button group depending on what is passed in from the parent component which looks like this: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on …

Read More