admin管理员组

文章数量:1313172

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>
Share Improve this question edited Dec 6, 2023 at 22:23 TylerH 21.1k77 gold badges79 silver badges112 bronze badges asked Oct 26, 2020 at 15:29 Archit SandesaraArchit Sandesara 6553 gold badges13 silver badges28 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

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