使用 Material UI 在工具栏中居中头像

Question

有什么方法可以让 Avatar 组件在 Toolbar 中与 MaterialUI 组件居中吗？

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

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

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

希望这对您有所帮助。

使用 Material UI 在工具栏中居中头像

Center Avatar inside Toolbar with MaterialUI

center

toolbar

material-ui

avatar