CODEWITHSUNDEEP
reactjsstyled-components
CatGirl19
CatGirl19

Reputation: 209

Centering icon and text

Im having a hard time centering a text with awesome font icon, and also centering the icons themselves.

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>

This is how it currently looks, any suggestions on how to center text & icon so that they appear in the center of the shaded box? enter image description here

Upvotes: 0

Views: 161

Answers (1)

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

Use flexbox.

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

Upvotes: 2

Related Questions