Reactjs 居中图标和文本

我很难将

文本

与

很棒的字体图标

居中，同时也很难将图标本身居中

Im使用样式化组件，如下所示：

在我的组件中，我有以下内容

图表+图表
班级
学生信息
知识数据库
课堂笔记

这就是它当前的外观，关于如何将文本和图标居中以使它们显示在着色框的中心，有什么建议吗？ 使用flexbox

const WrapperAroundIconsAndText = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
`; 

使用flexbox

const WrapperAroundIconsAndText = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
`; 

---

你能发布一个复制你的问题的提琴吗？看起来您的尺寸不对，您可能还需要将

align items

应用到css中。您可以发布一篇文章来复制您的问题吗？看起来您的大小不对，而且您可能还需要将

align items

应用于css

const WrapperAroundIconsAndText = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
`;