React - 中心和调整字体真棒图标

Question

所以，我在 react 中制作了一个小部件组件，我需要添加一个需要居中的图标。我有这个代码：

<div  className={classes.textCenter}>
    <i className={"fas fa-lungs fa-2x"} />
</div>

但我明白了：

看到封闭元素（i 标签）居中，但图标更大。

我还有下面的jss代码：

"& .fab,& .fas,& .far,& .fal,& .material-icons": {
    position: "relative",
    display: "inline-block",
    top: "0",
    verticalAlign: "middle",
    textAlign: "center"
  },

但这似乎没有任何区别。

提前致谢。

Answer 1

请给家长div试试这个-:

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

另外请删除任何现有图标classes。