Центрирующий значок и текст

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;
`;