Center Avatar inside Toolbar with MaterialUI

问题

Is there any way to center Avatar component inside Toolbar with MaterialUI components?

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

I have been playing with this few hours without any success.

回答1:

Do you mean vertical-alignment or horizontal? Anywho you can use the style attributes to override the default styles.

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

I'm using flexbox css properties on the Avatar to align the avatar vertically. The Toolbar has been redesigned recently using flexbox in the material-ui library.

So you can use flexbox properties to align contents within the Toolbar and ToolbarGroup.

Hope this helps.

来源：https://stackoverflow.com/questions/36828967/center-avatar-inside-toolbar-with-materialui