居中图标和文字

Question

我很难将text与awesome font icon居中，也很难使图标本身居中。

  

我正在使用样式化的组件，例如：

const StyledIcon = styled(FontAwesomeIcon)`
    width: 50px;
    display: flex;
    justify-content: center;
    font-size: 30px;
    margin-left: 50px;
`;
const Text = styled.div`
    font-size: 13px;
    display: flex;
    justify-content: center;
`; 

  

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

<StyledIcon icon={icon1} />
<Text>Charts + Graphs</Text>

<StyledIcon icon={icon2} />
<Text>Classes</Text>

<StyledIcon icon={icon3} />
<Text>Student Information</Text>

<StyledIcon icon={icon4} />
<Text>Knowledge Database</Text>

<StyledIcon icon={icon5}/>
<Text>Class Notes</Text>

这是当前外观，是否有关于如何使文本和图标居中的建议，以便它们出现在阴影框的中心？

Answer 1

使用flexbox。

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