Question

我在我的react项目（material-ui.com）中使用了材料ui库，并希望将徽标添加到appbar组件的中心。

我尝试使用以下代码：

 <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

我已经创建了运行示例，可以在link

上找到

 <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%)'
  }
};

请尝试在沙盒上提供示例，以便此人可以轻松地帮助您。

Material Ui（reactjs）-将徽标图像放在appBar中

1 个答案: