MUI 그리드 항목에서 항목을 수평으로 중앙에 배치하려면 어떻게 해야 합니까?

MUI 그리드 항목에서 항목을 수평으로 중앙에 배치하려면 어떻게 해야 합니까?

MUI 내부의 요소를 중앙에 배치하려면 어떻게 해야 합니까?Grid아이템? 다음은 리액트 어플리케이션의 일부입니다.

<Grid container>
  <Grid item xs={4}>
    // Unrelated stuff here
  </Grid>
  <Grid item xs={4}>
    // How do I centre these items?
    <IconButton className={classes.menuButton} color="inherit">
      <EditIcon/>
    </IconButton>
    <IconButton className={classes.menuButton} color="inherit">
      <CheckBoxIcon/>
    </IconButton>
  </Grid>
  <Grid item xs={4}>
    // Unrelated stuff here
  </Grid>
</Grid>

응모해 봤어요alignContent,justify,alignItems(부모에게)<Grid item>)이(가) 성공하지 못했습니다.

이것은 매우 간단하다고 생각했습니다만, 그리드 아이템의 중심화에 관한 정보를 찾을 수 없었습니다.

2초 후에...간단한 CSS를 통해 이 문제를 해결했습니다.

<Grid item xs={4} style={{textAlign: "center"}}>
</Grid>

좀 더 '올바른' 접근법이 또 있다면 언제든지 다른 답변을 올려주세요.

 <Grid container  className = {classes.root} align = "center" justify = "center" alignItems = "center"  >
            <CssBaseline/>
            <Grid item xs = {false} sm = {4} md = {6}>

            </Grid>
            <Grid item xs = {12} sm = {4} md = {6}>

            </Grid>
        </Grid>`enter code here`

올바른 방법은 다음과 같습니다.

<Grid container item xs={4} justify="center">

컨테이너 속성이 true로 설정된 경우 구성 요소는 유연한 컨테이너 동작을 가집니다.

그리드 API

MUI v5에서는 이행 가이드인justify을 지지하다.Grid로 이름이 변경되었습니다.justifyContentCSS 속성 이름에 맞춥니다.

<Grid container justifyContent="center" alignItems="center">

언급URL : https://stackoverflow.com/questions/52357717/how-to-horizontally-center-an-item-in-mui-grid-item