web-dev-qa-db-ja.com

マテリアルUIグリッドアイテムのアイテムを水平方向に中央揃えする方法は？

マテリアルUIグリッドアイテム内の要素を中央に配置するにはどうすればよいですか？ここに私の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>

alignContent、justify、alignItemsを（親<Grid item>に）適用しようとしましたが、成功しませんでした。

これは非常に簡単だと思いましたが、グリッドアイテム内のアイテムの中央揃えに関する情報を見つけることができませんでした。

cssreactjsmaterial-ui
8
Duncan Jones

2秒後...簡単なCSSでこれを解決しました：

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

もう少し「正しい」アプローチが他にある場合は、遠慮なく別の答えを投稿してください。

5
Duncan Jones

これは正しい方法です：

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

コンテナプロパティがtrueに設定されている場合、コンポーネントはフレックスコンテナの動作をします。

グリッドAPI

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