React - 垂直对齐文本和图标

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等，但问题仍未解决。

请问有什么建议吗？谢谢！

- George Marin

---

如果您想要垂直对齐图标，请使用display:block而不是flex（flex用于水平对齐）。 - לבני מלכה

更明确一点：我希望文本和图标在同一行，但文本位于图标的中心。 - George Marin

文本和图标应该在同一行上，这样它就是水平的，对吗？你有任何图片来描述它吗？ - לבני מלכה

使用 display: flex - Shubham Agarwal Bhewanewala

你的元素高度足够让图标在垂直方向上对齐吗？ - Shubham Agarwal Bhewanewala

Answer 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/

您需要为包含图像/图标和文本的

标记提供行高。并确保图标/图像的高度等于给定给

的行高。

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

- krsna

Answer 2

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

- Seema

---

我认为这是React Native，而不是ReactJS（我是React的初学者，但我相信在ReactJS中并不存在"View"元素）。 - George Marin