Центр Аватар внутри панели инструментов с MaterialUI

Question

Есть ли способ центрировать компонент Avatar внутри панели инструментов с компонентами MaterialUI?

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

Я играл с этим несколькими часами без каких-либо успехов.

Answer 1

Вы имеете в виду вертикальное выравнивание или горизонтальное? Anywho вы можете использовать атрибуты style для переопределения стилей по умолчанию.

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

Я использую свойства flexbox css на аватаре, чтобы выровнять аватар по вертикали. Недавно был переработан проект Toolbar с использованием flexbox в библиотеке material-ui.

Таким образом, вы можете использовать свойства flexbox для выравнивания содержимого в пределах Toolbar и ToolbarGroup.

Надеюсь, это поможет.