CODEWITHSUNDEEP
javascriptcssreactjsstyled-componentsstyling
Tanish Gupta
Tanish Gupta

Reputation: 492

Styling a react component in styled-component

I am trying to align the component in the center. But I am unable to do so.

Component snippet:

<Grid item xs={12}>
              <Box marginTop={2} marginBottom={2} display="flex">
                <Box width="100%">
                  <Divider />
                </Box>
                <Box width="100%">
                  <OrLabel>OR</OrLabel>
                </Box>
                <Box width="50%">
                  <Divider />
                </Box>
              </Box>
            </Grid>

component styling:

export const OrLabel = styled.span`
  position: absolute;
  margin-top: -10px;
  margin-left: -10px;
`;

enter image description here

I tried the position: center in the styled-component, but it also giving the same result. How could I move the "OR" to the center?

Upvotes: 0

Views: 372

Answers (1)

Vida Hedayati
Vida Hedayati

Reputation: 336

please try it:

 <Box style{{display:"flex",alignItem:"center",justyfyContent:"center"}} width="100%"> <OrLabel>OR</OrLabel> </Box>

Upvotes: 1

Related Questions