React - 垂直对齐文本和图标答案

【问题标题】：React - vertically align text and iconReact - 垂直对齐文本和图标
【发布时间】：2018-08-02 07:24:27
【问题描述】：

我已经尝试了所有方法来垂直对齐图标和文本，代码：

<Danger color="secondary" style={{ flex:1,justifyContent: "center",alignItems: "center" }}>
  <ErrorOutline
    className={classes.warning}
  />
  <text numberOfLines={1} style={{ textAlignVertical: "center" }}>
    The last job was canceled
  </text>
</Danger>

我尝试过的东西：display, justifyContent, alignItems, flex, flexDirection, etc.

有什么建议吗？谢谢！

【问题讨论】：

如果你想用dispaly:block代替flex图标（flex是水平对齐）
为了更清楚：D 我希望文本和图标位于同一行，但文本位于图标的中心
text and icon to be on the same line 所以它是水平的而不是垂直的，对吗？你有什么图片可以描述吗？
使用显示：flex
你是否有足够的高度让图标可以垂直对齐？

标签： css reactjs

【解决方案1】：

在 React 代码的内部渲染中试试这个

<div style={{display: 'flex', lineHeight: '40px'}}>
  <img src="https://png.icons8.com/ios/50/000000/user-male-circle-filled.png" height="40"/>
  <div>Welcome User!!!</div>
</div>

为了清楚地理解，您可以在此链接中找到此特定示例的完整 React 代码：https://jsfiddle.net/r6yLmu8t/

您需要为图像/图标和文本所在的 div 标签提供 lineHeight。并确保图标/图像高度等于给定 div 的 lineHeight。

希望这将满足您对文本和图标位于同一行且文本位于图标/图像中心的需求

【讨论】：

【解决方案2】：

<Button light>
    <View style={{flexGrow: 1, justifyContent:'center', alignItems: 'center'}}>
        <Icon name='arrow-back' />
        <Text>Back</Text>
    </View>
</Button>

【讨论】：

我认为这是react-native，而不是reactjs（我是react的初学者，但我相信reactjs中不存在元素“View”）