web-dev-qa-db-fra.com

Comment centrer horizontalement un élément dans un élément de grille Material UI?

Comment centrer des éléments à l'intérieur d'un élément de grille d'interface utilisateur de matériau? Voici un extrait de mon application React:

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

J'ai essayé d'appliquer alignContent, justify, alignItems (au parent <Grid item>) sans succès.

Je pensais que ce serait assez simple, mais je n'ai trouvé aucune information sur le centrage des éléments à l'intérieur des éléments de la grille.

cssreactjsmaterial-ui
8
Duncan Jones

Deux secondes plus tard ... j'ai résolu cela grâce à un simple CSS:

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

S'il existe une autre approche qui est en quelque sorte plus "correcte", n'hésitez pas à poster une autre réponse.

5
Duncan Jones

C'est la bonne façon:

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

si la propriété du conteneur est définie sur true, le composant aura le comportement du conteneur flexible.

API de grille

5
Juan David Arce
 <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`
1
Bharath Mb