Reputation: 209
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?
Upvotes: 0
Views: 161
Reputation: 2996
Use flexbox.
const WrapperAroundIconsAndText = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`;
Upvotes: 2