如何使用 FlexBox 在 FlatButton 中对齐材质图标？答案

【问题标题】：How to align material icon within a FlatButton using FlexBox?如何使用 FlexBox 在 FlatButton 中对齐材质图标？
【发布时间】：2016-04-12 03:41:39
【问题描述】：

我正在尝试使用 FlexBox 在 material-ui FlatButton 中对齐 Google 材质图标。我尝试了几种排列方式，但总是得到相同的结果——图标位于按钮的最底部。我不确定这是否是材料用户界面特定的问题。如何正确实现对齐？

  <FlatButton
    style = {buttonStyle}
    onClick = {
      onIncrementClick
    }
    icon={<i style= {{display:'flex', alignItems:'center', verticalAlign: 'center'}} className="material-icons">keyboard_arrow_up</i>}
    />

【问题讨论】：

标签： flexbox material-ui

【解决方案1】：

您看过这里的文档吗 - http://www.material-ui.com/#/components/flat-button？

他们在左侧和右侧的平面按钮中有图标示例。这是在右侧显示图标的代码：

<FlatButton
  label="Label before"
  labelPosition="before"
  primary={true}
  style={styles.button}
  icon={<ActionAndroid />}
/>

【讨论】：

是的，我已经看到了。不过，我希望有更细的粒度。垂直居中是我想要的。无论如何，我可能会选择 IconButton，因为它看起来更重要