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
5 Answers
Reset to default 4Are 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
版权声明:本文标题:javascript - how to display icon in center in ant design Button - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741930697a2405557.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论