Aligning only one grid item to be centered Material UI

Question

I am trying to only center one grid item as opposed to both sides of the grid. When alignItems="center" is applied to my grid container, both my grid items are now centered. I would like to only center the grid item that is sitting on the right. is there a way to do so in material ui?? My code is as follows:

import React from 'react'
import BarHop from '../images/BarHop.jpg'
import Oddjobs from '../images/Oddjobs.png'
import JobTracker from '../images/JobTracker.png'
import BarhopPlace from '../images/BarhopPlace.jpg'
import OddjobsPlace from '../images/OddjobsPlace.png'
import JobTrackerPlace from '../images/JobTrackerPlace.png'
import Img from 'react-cool-img'

// Material UI
import Typography from '@material-ui/core/Typography'
import { makeStyles } from '@material-ui/core/styles'
import Container from '@material-ui/core/Container'

import Grid from '@material-ui/core/Grid'

const useStyles = makeStyles(theme => ({
  grid: {
    padding: 0
  },

  dashboardContainer: {
    marginTop: 90,
    padding: 10,
    marginBottom: 40
  },
  image: {
    width: '95%'
  },
  alumniChips: {
    display: 'flex',
    justifyContent: 'center'
  },

  hide: {
    '@media (max-width: 1024px)': {
      display: 'none'
    },
    '@media (max-width: 700px)': {
      display: 'none'
    },
    '@media (max-width: 600px)': {
      display: 'none'
    }
  }
}))

const PortfolioTest = () => {
  const classes = useStyles()
  return (
    <>
      <div style={{ marginTop: 150 }}>
        <Container>
          <Typography variant='h6' style={{ textAlign: 'center' }}>
            Here's My Work...
          </Typography>
          <Typography
            variant='h3'
            style={{ textAlign: 'center', marginBottom: 20 }}
          >
            My Portfolio Page
          </Typography>
          <br />
        </Container>

        <Grid
          container
          spacing={2}
          id='portfolio-background'
          alignItems='center'
          justify='space-between'
          style={{ height: 550 }}
        >
          <Grid item xs={12} sm={6}>
            <Typography
              variant='h3'
              style={{ textAlign: 'center', marginBottom: 20 }}
            >
              BarHop
            </Typography>
          </Grid>
          <Grid item xs={12} sm={6}>
            <Img
              placeholder={BarhopPlace}
              src={BarHop}
              alt='barhop'
              cache={false}
              className={classes.image}
            />
          </Grid>
        </Grid>
      </div>
    </>
  )
}

export default PortfolioTest

Emad Emami Emad Emami · Accepted Answer · 2020-06-26T16:55:56

The point is <Grid /> in material-ui can be item & container at the same time. do this:

<Grid item container alignItems='center' xs={12} sm={6}>
 <Img
  placeholder={BarhopPlace}
  src={BarHop}
  alt='barhop'
  cache={false}
  className={classes.image}
 />
</Grid>

and remove the alignItems='center' from its parent <Grid container />

Aligning only one grid item to be centered Material UI

1 Answers