代码之家 › 专栏 › 技术社区 › Duncan Jones

如何在物料界面网格项中水平居中?

material-ui reactjs css

Duncan Jones · 技术社区 · 7 年前

如何在材质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>

我认为这将是相当简单的,但我没有找到任何关于居中网格项目内的项目的信息。

1 回复 | 直到 7 年前

Duncan Jones 7 年前

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

如果有其他更“正确”的方法,请随时发布另一个答案。

Bhary 6 年前

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

Juan David Arce 6 年前

这是正确的方法:

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

如果container属性设置为true,那么组件将具有flex 容器行为。

Grid API

推荐文章

Mohammed Sabir · 下一个js getServerSideProps中的水合错误

1 年前

mettamyron · 具有多用途的材质UI滑块单击时状态重复

1 年前

MatterOfFact · React:Formik形式的物料UI单选按钮组重置不起作用

1 年前

assembler · MUI 5自动完成将禁用的项目样式更改为不使用不透明

1 年前

Terje Nygård · 反应18和材料UI(@mui)。样式不会附加到主题中

1 年前

Alexander Farber · 如何在MUI X DataGrid列中显示img?

2 年前

ian · 使用“responsiveFontSizes”与“experiental_extendTheme”和“experimental_CssVarsProvider”反应MUI`

2 年前

beuluis · MaterialUI样式在带Vite的Shadow DOM中安装不正确的问题

2 年前

ismail.khn · 如何更改MUI日期选择器的“选择日期”标签?

2 年前

Donko · 单击时如何从MUI自动完成、文本字段中删除占位符文本?[副本]

2 年前