工具栏内的芯片不正确垂直对齐

Question

问题描述

我正在尝试将芯片放入工具栏中，并且遇到垂直对齐问题。我可以通过覆盖一些样式来修复它，但作为一个真正的初学者，我认为我做错了，即没有以正确的方式使用material-ui组件？

重现的步骤

如果我将芯片作为appbar的直接子项，则芯片会错误地填满整个高度： http://i.imgur.com/2mHKaIV.png

render() { return ( <Toolbar> <Chip> <Avatar icon={<AccountCircleIcon />} /> Not signed in </Chip> </Toolbar> ) }

如果我将它包装在列表项中，它的高度是正确的但它仍然不在工具栏的中心： http://i.imgur.com/Ksc5CTd.png

render() { return ( <Toolbar> <ListItem disabled={true}> <Chip> <Avatar icon={<AccountCircleIcon />} /> Not signed in </Chip> </ListItem> </Toolbar> )

我做错了什么？ （当然我希望它在工具栏中垂直居中，并且芯片的高度正确）

版本

• Material-UI：0.15.4
• 反应：15.3.2
• 浏览器：Chrome 53.0.2785.116（Mac OSX）

Answer 1

我能够做一个模型（我讨厌设置React / Material-Ui问题有多困难）并发现了同样的问题。我认为这是芯片定位的预期行为。

但是，所有内容都以保证金固定：＆＃39; auto＆＃39;

render() {
    return (
    <Toolbar>
        <Chip style={{ margin: 'auto' }}>
            <Avatar icon={<AccountCircleIcon />} />
            Not signed in
        </Chip>
    </Toolbar>
    )
}