Центрирование аватара на панели инструментов с помощью MaterialUI

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

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

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


material-ui toolbar center avatar
person B.Gen.Jack.O.Neill    schedule 24.04.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы имеете в виду вертикальное или горизонтальное выравнивание? В любом случае вы можете использовать атрибуты 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.

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

person Tintin1343    schedule 27.04.2016