CODEWITHSUNDEEP
htmlreactjscssflexboxstyled-components
AnnaSm
AnnaSm

Reputation: 2300

How to vertically center using Responsive React grid system built with styled-components?

I'm using grid-styled to make a layout.

I currently have the following:

enter image description here

How can I make the red/green items vertically centered in the blue container?

Here is my code, am I doing this correctly?

......

const Container = styled(Box)`
  max-width: 1100px;
  background: violet;
`;
Container.defaultProps = {
  mx: 'auto',
};

.....

  <Box style={{ backgroundColor: 'darkBlue', minHeight: 500 }}>
    <Container>
      <Flex wrap>
        <Box
          p={36}
          width={[1, 1 / 2]}
          style={{ backgroundColor: 'red' }}
        >
          {content[0]}
        </Box>
        <Box
          p={36}
          width={[1, 1 / 2]}
          style={{ backgroundColor: 'green' }}
        >
          {content[1]}
        </Box>
      </Flex>
    </Container>
  </Box>

help appreciated.

Upvotes: 1

Views: 1793

Answers (1)

Badrush
Badrush

Reputation: 1287

You need to pass props to tell the Flex (flexbox) what you are trying to do.

<Flex> accepts the flexDirection align and justify props which will tell it how to align the children.

Try this:

<Flex flexDirection="row" align="center" justify="center" wrap>

Upvotes: 2

Related Questions