0

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?

Tanish Gupta
  • 400
  • 2
  • 8
  • 20
  • 1
    The width of your third box is `50%` while the other 2 are `100%`. When calculating the width in relation to the total width, this 50% probably causes an offset. – jolo Feb 17 '22 at 11:17
  • You don't have to use absolute positioning, have a look at this and see if it helps: https://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle – StudioTime Feb 17 '22 at 11:17

1 Answers1

1

please try it:

 <Box style{{display:"flex",alignItem:"center",justyfyContent:"center"}} width="100%"> <OrLabel>OR</OrLabel> </Box>
Vida Hedayati
  • 328
  • 1
  • 7