CODEWITHSUNDEEP
cssflexboxcss-gridcentering
Ricky
Ricky

Reputation: 66

centering a div in a grid item

I've been trying to horizontally center a div on the screen of an Iphone. The div is a bit narrower than the phone screen. I have been googling and searching this site and trying every combination of display, flex, margin, width, justify*, align*, placeself, etc. etc. in the container as well as item style and nothing has worked. Here is the code, with all my attempts removed from the style since none of it worked and I assume may interfere with correct solution. No matter what I try, the div just stays on the left side of the screen.

{left} and {right} are divs, with width: 400px

    <Mobile>
        <Grid container style={{  }} >
            <Grid item xs={12} style={{  }}>{left}{right}</Grid>
        </Grid>
    </Mobile>
    

const Mobile = ({ children }) => useMediaQuery({ maxWidth: 799 }) && children

Upvotes: 2

Views: 152

Answers (1)

Ricky
Ricky

Reputation: 66

Here is what finally worked for me after lots of trial and error.

    <Mobile>
        <Grid container style={{ justifyItems: 'center', alignItems: 'center', display: 'inline-grid', width: '100%' }} >
            <Grid item xs={12} style={{ width: '400px' }}>{left}{right}</Grid>
        </Grid>
    </Mobile>

To clarify, my question was probably inaccurate. What I needed to do was center the grid item in the grid container.

Upvotes: 1

Related Questions