居中图标和文本

Question

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

Im using styled components like so:

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

and in my component I have the following

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

居中图标和文本

Centering icon and text

reactjs

styled-components