web-dev-qa-db-ja.com

Ant Designでは、<Icon>を<Row>の垂直方向の中央に配置する方法を教えてください。

My 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、機能しませんでした。

誰かがアイデアを持っていますか？

cssreactjsfrontendantd
3
enzeberg

これは実際には具体的なものではなく、一般的には垂直方向の中央揃えです。従来のCSSでそれを行う方法について説明している 6垂直センタリングの方法 をお勧めします。この場合、CSS Tableメソッドが適切に機能します。

Flexbox（<Row type="flex">）、align-items: center行。

1
Jesper We

Jesperのおかげで私たちは助けてくれます！幸いなことに、私はこの小さな問題の解決策を見つけました：

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>

Iconの場合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>
1
enzeberg

私の場合、機能したのはtextAlign = 'center'でした。以下の例では、カードのコンテンツを中央に配置したいと考えていました。そしてそれは素晴らしかった！

import { Row, Col, Button, Card } from 'antd';
import 'antd/dist/antd.css';
...
<Row>
  <Col md={{span: 12, offset: 6}}>
      <Card style={{textAlign: 'center'}}>
           <h1 style={{ color: '#52c41a' }}>
                    Booked Successfully!
           </h1>
            <Button size="large" type="primary">
               See your booked trips
            </Button>
       </Card>
    </Col>
  </Row>
...

そして、これが結果のスクリーンショットです。 enter image description here

0
manpikin