css - 在反应中，在方形和圆形按钮内使用 faPlay 图标居中 fontawesome 组件

Question

我使用 reactjs、react-bootstrap、bootstrap 和 fontawesome 作为依赖项。

我在 react-bootstrap 按钮中有一个 fontAwesome 组件，它有text-center一个 className ，所有其他图标都以相同的方式居中，没有问题，除了 faPlay 图标似乎有点偏左。

我应该补充一点，父按钮是一个长度为 2em 的正方形。

在这里它在行动。

这是 repo 中包含该组件的模块。

faPlay 没有某种特殊的 css 或类似的东西，那么是什么导致它没有居中但其他一切都是？

标签： cssreactjsbootstrap-4font-awesome

Answer 1

添加 Flexbox CSS 属性使其居中

button {
    display: flex;
    justify-content: center;
    align-items: center;
}