代码之家 › 专栏 › 技术社区 › whitebear

按钮未在网格容器中居中

material-ui css html

whitebear · 技术社区 · 4 年前

我想把按钮放在中间 Grid 布局 Material-UI

<Grid container style={{backgroundColor:'green'}} alignItems="center" justify="center" >
    <Grid alignItems="center" justify="center" item xs={12} 
    style={{margin:'auto',width:"100%",backgroundColor:'white'}}>
        <Button variant="contained" style={{margin:'auto'}}>
          Next
        </Button>
    </Grid>
</Grid>

然而,按钮显示在左边。

我怎样才能集中注意力??

0 回复 | 直到 4 年前

vanntile 4 年前

我把你的例子简化了一点。使用 xs={12} 正在为内部创建列宽 Grid .由于它使用网格,您只需要 alignItems="center" 和 justify="center" 用于在两个轴上进行中心对齐。

<Grid container style={{ backgroundColor: "green" }} alignItems="center" justify="center" direction="row">
     <Grid item>
         <Button variant="contained" style={{ margin: "auto" }}>
            Next
         </Button>
     </Grid>
</Grid>

推荐文章

Softly · 单选按钮未按预期取值

1 年前