css - 在方形和圆形按钮内将 fontawesome 组件与 faPlay 图标居中

Question

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

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

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

这里是action .

这是 module在 repo 中包含该组件。

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

Answer 1

添加 Flexbox CSS 属性使其居中

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