使用MaterialUI在工具栏中居中头像

Question

有没有办法使用MaterialUI组件将Avatar组件置于工具栏中？

<Toolbar>
    <ToolbarGroup float="right" lastChild>
        <ToolbarTitle text="Toolbar"/>
        <Avatar src="images/avatar.jpg"/>
    </ToolbarGroup>
</Toolbar>

我这几个小时一直在玩，没有任何成功。

Answer 1

您的意思是垂直对齐还是水平？任何你可以使用style属性来覆盖默认样式。

 <Toolbar>
    <ToolbarGroup float="right" lastChild={true}>
        <ToolbarTitle text="Toolbar" />
        <Avatar src="images/uxceo-128.jpg" style={{alignSelf: 'center'}} />
    </ToolbarGroup>
  </Toolbar>

我在Avatar上使用flexbox css属性来垂直对齐头像。最近使用Toolbar库中的flexbox重新设计了material-ui。

因此，您可以使用flexbox属性来对齐Toolbar和ToolbarGroup中的内容。

希望这有帮助。