如何在ant design Button的中心显示图标答案

【问题标题】：how to display icon in center in ant design Button如何在ant design Button的中心显示图标
【发布时间】：2021-02-08 21:18:37
【问题描述】：

我正在使用 ant design 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>

我也尝试过这样，但没有任何变化。

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

【问题讨论】：

你能告诉我们DeleteOutlined元素吗？也许我们可以自定义那个 css。尝试向我们展示 html 结构
我已经用 import { DeleteOutlined } from "@ant-design/icons" 更新了我的问题；
它适用于我。似乎您可能有一些导致问题的 CSS，或者可能安装的版本可能有错误。

标签： javascript reactjs styles stylesheet antd

【解决方案1】：

您可以为按钮本身添加填充，它会解决问题。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

您使用的是引导程序还是顺风 CSS？尝试添加：

svg { 垂直对齐：基线； }

【讨论】：

对我来说，当我将 Bootstrap 添加到项目中时，这种行为就开始了。我把你的答案放在我的全球风格中并且工作得很好。谢谢。