如何在Material UI网格项目中将项目水平居中? [英] How to horizontally center an item in Material UI grid item?

问题描述

如何在Material UI Grid项内居中放置元素?这是我的React应用程序中的一个片段:

How do I center elements inside a Material UI Grid item? Here is a snippet from my React application:

<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> )，但没有成功.

I've tried applying alignContent, justify, alignItems (to the parent <Grid item>) with no success.

我以为这很简单，但是我找不到关于网格项目内部居中项目的任何信息.

I thought this would be quite simple, but I've failed to find any information on centring items inside of grid items.

推荐答案

两秒钟后...我通过一些简单的CSS解决了这个问题:

Two seconds later... I solved this through some simple CSS:

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

如果还有另一种方法在某种程度上更正确"，请随时发布另一个答案.

If there is another approach that is somehow more "correct", please feel free to post another answer.

这篇关于如何在Material UI网格项目中将项目水平居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！