css - 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 等

有什么建议吗？谢谢!

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/

您需要为包含图像/图标和文本的 div 标记提供 lineHeight。并确保图标/图像高度等于为 div 指定的 lineHeight。

希望这将实现您对文本和图标位于同一行以及文本位于图标/图像中心的需求