带有MaterialUI的工具栏中的中心头像 [英] Center Avatar inside Toolbar with MaterialUI

问题描述

是否可以通过MaterialUI组件在工具栏中使Avatar组件居中?

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.

推荐答案

您是指垂直对齐还是水平对齐?可以使用style属性覆盖默认样式的任何人.

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>

我正在使用头像上的flexbox css属性来垂直对齐头像.最近使用material-ui库中的flexbox重新设计了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.

因此，您可以使用flexbox属性在Toolbar和ToolbarGroup中对齐内容.

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

希望这会有所帮助.

这篇关于带有MaterialUI的工具栏中的中心头像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！