javascript - how to display icon in center in ant design Button - Stack Overflow

admin管理员组

文章数量:1313387

I am using ant design Button and setting the icon but the icon is not displayed in center inside button.

import "antd/dist/antd.css";
import { DeleteOutlined } from "@ant-design/icons";

<Row>
  <Col span={2} style={{ padding: "5px" }} >
                                <Button
                                    type="primary"
                                    size="middle"
                                    shape="circle"
                                    danger
                                    icon={<DeleteOutlined />}

                                    onClick={() => deleteSkid(index)}
                                />
                            </Col>
</Row>

I also tried like this but there's no change.

<Row>
  <Col span={2} style={{ padding: "5px" }} >
            <Button
               type="primary"
               size="middle"
               shape="circle"
               danger
               onClick={() => deleteSkid(index)}
             >
                   <DeleteOutlined />
              </Button>
    </Col>
</Row>

I am using ant design Button and setting the icon but the icon is not displayed in center inside button.

import "antd/dist/antd.css";
import { DeleteOutlined } from "@ant-design/icons";

<Row>
  <Col span={2} style={{ padding: "5px" }} >
                                <Button
                                    type="primary"
                                    size="middle"
                                    shape="circle"
                                    danger
                                    icon={<DeleteOutlined />}

                                    onClick={() => deleteSkid(index)}
                                />
                            </Col>
</Row>

I also tried like this but there's no change.

<Row>
  <Col span={2} style={{ padding: "5px" }} >
            <Button
               type="primary"
               size="middle"
               shape="circle"
               danger
               onClick={() => deleteSkid(index)}
             >
                   <DeleteOutlined />
              </Button>
    </Col>
</Row>

• javascript
• reactjs
• antd

Share Improve this question Follow edited Dec 6, 2023 at 22:23 TylerH 21.1k7777 gold badges7979 silver badges112112 bronze badges asked Oct 26, 2020 at 15:29 Archit SandesaraArchit Sandesara 65533 gold badges1313 silver badges2828 bronze badges 1

• Its works fine with me. Seems like you might have some CSS which was causing the issue or may be installed version might have bug. – Shreyans Shrivastav Commented Jul 21, 2021 at 12:30

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Are you using bootstrap or tailwind CSS? Try adding this:

svg { vertical-align: baseline; }

import { Button } from 'antd';
import { DeleteOutlined } from "@ant-design/icons";
 
<Button type="primary" danger shape="circle" icon={<DeleteOutlined />}></Button>

I solved this problem by adding a padding-bottom CSS property to the icon.

<LeftOutlined style={{ paddingBottom: "30px" }} />

You can add padding to the button itself and it will solve the issue.

You need import Button ponent from antd library

import { Button } from "antd";

本文标签： javascripthow to display icon in center in ant design ButtonStack Overflow