仅将一个网格项对齐到居中 Material UI答案

【问题标题】：Aligning only one grid item to be centered Material UI仅将一个网格项对齐到居中 Material UI
【发布时间】：2020-06-26 16:50:41
【问题描述】：

我试图只将一个网格项目居中，而不是网格的两侧。当 alignItems="center" 应用于我的网格容器时，我的两个网格项现在都居中。我只想将位于右侧的网格项目居中。有没有办法在材料ui中这样做？我的代码如下：

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

Material-ui中的<Grid />可以同时是item&container。这样做：

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

并从其父 <Grid container /> 中删除 alignItems='center'

【讨论】：