Question

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

<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.

有什么建议吗？谢谢！

Answer 1

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

Answer 2

尝试在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 个答案: