Question

我试图仅将一个网格项居中，而不是网格的两侧。当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

Answer 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>

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

仅对齐一个网格项目以居中显示材质UI

1 个答案: