2

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
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Ricky
  • 66
  • 4
  • possible guidance here: https://stackoverflow.com/q/45536537/3597276 – Michael Benjamin Feb 07 '22 at 17:18
  • Thanks @MichaelBenjamin . That was one of the many many articles I read and tried. I just tried again, what seemed like the part that was relevant, to make sure I didn't miss something. Tried putting justifyItems: 'center', alignItems: 'center' in the grid item. Did not work. – Ricky Feb 09 '22 at 18:22
  • 1
    Ah. Finally figured it out. Thanks to you @MichaelBenjamin , I went through that page again, trying every possible combination. Part of the problem was that I was using display: 'inlineGrid' instead of display: 'inline-grid' . Still don't understand the logic of when to change things to camel case, so it's just trial and error til hopefully do one day :) Ill post the solution below. – Ricky Feb 09 '22 at 18:37

1 Answers1

1

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.

Ricky
  • 66
  • 4