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

Question

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

<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。

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

React - Center and resize font awsome icon

css

reactjs

font-awesome-5