Material Ui (actjs) - центрирование логотипа в appBar

Question

Я использую библиотеку пользовательского интерфейса материала для своего реактивного проекта (material-ui.com) и хочу добавить свой логотип в центр компонента панели приложения.

Я попытался использовать следующий код:

 <AppBar position="sticky" >
           <Toolbar>
                  <img src={'../logo.svg'} className={classes.logo} alt="logo" />
            </Toolbar>
 </AppBar>

И стиль:

logo: {
        margin: 'auto',
        textAlign: 'center',
        maxWidth: '50%',
        maxHeight: '70%',
    }

Это "вид" работает.Под этим я подразумеваю, что в Chrome и Firefox размер логотипа различен, а в IE он перекрывает панель приложения.

Я смотрю, как центрировать этот логотип по центру панели, где он относительно одинаков для всех браузеров.

Answer 1

Я создал запущенный пример, который можно найти по ссылке

 <AppBar position="sticky" >
  <Toolbar>
    <div style={classes.logoHorizontallyCenter}>
      <img src={'../logo.svg'} className={classes.logo} alt="logo" />
    </div>
  </Toolbar>
 </AppBar>

Стиль:

    var classes = {
  logo: {
    margin: 'auto',
    textAlign: 'center',
    maxWidth: '50%',
    maxHeight: '70%',
  },
  logoHorizontallyCenter: {
    position: 'absolute', 
    left: '50%', 
    top: '50%',
    transform: 'translate(-50%, -50%)'
  }
};

Пожалуйста, попробуйте привести пример в песочнице, чтобы онбыть легко для человека, чтобы помочь вам.